From 0536c11bde92130ae4aec6f10f84557a6d106785 Mon Sep 17 00:00:00 2001
From: Karthik Durai <iamkarthiksiddarth@gmail.com>
Date: Wed, 14 Feb 2024 18:07:43 +0530
Subject: [PATCH 1/6] [AR-7536] wallet starter tips bug on main-net (#584)

* fix dot issue

* add skip btn

* remove div
---
 src/pages/StarterTips/index-page.vue | 11 ++++++++++-
 src/pages/StarterTips/page-1.vue     |  4 ++--
 src/pages/StarterTips/page-2.vue     |  8 +++-----
 src/pages/StarterTips/page-3.vue     |  6 +++---
 src/pages/StarterTips/page-4.vue     |  6 +++---
 src/pages/StarterTips/page-5.vue     |  7 +++----
 src/pages/StarterTips/page-6.vue     |  6 +++---
 7 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/pages/StarterTips/index-page.vue b/src/pages/StarterTips/index-page.vue
index 3af9d5d6..60ed1604 100644
--- a/src/pages/StarterTips/index-page.vue
+++ b/src/pages/StarterTips/index-page.vue
@@ -44,6 +44,10 @@ function previous() {
   }
 }
 
+function skip() {
+  emits('close')
+}
+
 watch(
   () => currentPage.value,
   (val) => {
@@ -61,7 +65,12 @@ watch(
 
 <template>
   <div class="flex flex-col w-full rounded-md absolute top-0 left-0 h-full">
-    <div class="flex-1">
+    <div class="flex-1 bg-black-100 bg-opacity-80 py-3">
+      <div class="px-6 flex justify-end">
+        <button class="flex items-center space-x-2 text-xs" @click="skip">
+          Skip
+        </button>
+      </div>
       <component :is="PagesIndex[currentPage]" />
     </div>
     <div
diff --git a/src/pages/StarterTips/page-1.vue b/src/pages/StarterTips/page-1.vue
index 8ca580b8..81342d25 100644
--- a/src/pages/StarterTips/page-1.vue
+++ b/src/pages/StarterTips/page-1.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-const dots = [1, 2, 3, 4]
+const dots = [1, 2, 3, 4, 5, 6]
 </script>
 
 <template>
-  <div class="space-y-4 bg-black-100 h-full p-6 bg-opacity-80">
+  <div class="space-y-4 h-full p-6 pt-2">
     <h1 class="text-xl uppercase font-black">New user orientation</h1>
     <p class="text-sm">
       The following screens will help you understand the main functionalities
diff --git a/src/pages/StarterTips/page-2.vue b/src/pages/StarterTips/page-2.vue
index 5ec1bf2b..6d98f4c8 100644
--- a/src/pages/StarterTips/page-2.vue
+++ b/src/pages/StarterTips/page-2.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-const dots = [1, 2, 3, 4]
+const dots = [1, 2, 3, 4, 5, 6]
 </script>
 
 <template>
-  <div
-    class="h-full w-full flex flex-col justify-end bg-black-100 bg-opacity-80"
-  >
+  <div class="h-full w-full flex flex-col justify-end">
     <div class="flex-1 startertips">
       <div
         class="absolute z-[2147483648] w-[192px] h-[192px] top-[70px] left-5"
@@ -23,7 +21,7 @@ const dots = [1, 2, 3, 4]
           v-for="dot in dots"
           :key="dot"
           class="block h-[5px] w-[5px] rounded-full"
-          :class="dot === 1 ? 'bg-[#FFFFFF]' : 'bg-[#8D8D8D]'"
+          :class="dot === 2 ? 'bg-[#FFFFFF]' : 'bg-[#8D8D8D]'"
         ></span>
       </div>
     </div>
diff --git a/src/pages/StarterTips/page-3.vue b/src/pages/StarterTips/page-3.vue
index 1f2daa94..1ee915b6 100644
--- a/src/pages/StarterTips/page-3.vue
+++ b/src/pages/StarterTips/page-3.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-const dots = [1, 2, 3, 4]
+const dots = [1, 2, 3, 4, 5, 6]
 </script>
 
 <template>
   <div class="h-full w-full flex flex-col">
-    <div class="h-1/4 w-full relative bg-black-100 bg-opacity-80">
+    <div class="h-1/4 w-full relative">
       <div class="h-full w-full relative">
         <div class="absolute z-[2147483648] w-16 h-16 top-12 right-10"></div>
       </div>
@@ -21,7 +21,7 @@ const dots = [1, 2, 3, 4]
           v-for="dot in dots"
           :key="dot"
           class="block h-[5px] w-[5px] rounded-full"
-          :class="dot === 1 ? 'bg-[#FFFFFF]' : 'bg-[#8D8D8D]'"
+          :class="dot === 3 ? 'bg-[#FFFFFF]' : 'bg-[#8D8D8D]'"
         ></span>
       </div>
     </div>
diff --git a/src/pages/StarterTips/page-4.vue b/src/pages/StarterTips/page-4.vue
index e5aef325..64269930 100644
--- a/src/pages/StarterTips/page-4.vue
+++ b/src/pages/StarterTips/page-4.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-const dots = [1, 2, 3, 4]
+const dots = [1, 2, 3, 4, 5, 6]
 </script>
 
 <template>
-  <div class="h-full p-6 bg-black-100 bg-opacity-90">
+  <div class="h-full p-6">
     <div class="space-y-4 h-1/4">
       <h1 class="text-xl uppercase font-black">Digital Collectibles Support</h1>
       <p class="text-sm">
@@ -15,7 +15,7 @@ const dots = [1, 2, 3, 4]
           v-for="dot in dots"
           :key="dot"
           class="block h-[5px] w-[5px] rounded-full"
-          :class="dot === 2 ? 'bg-[#FFFFFF]' : 'bg-[#8D8D8D]'"
+          :class="dot === 4 ? 'bg-[#FFFFFF]' : 'bg-[#8D8D8D]'"
         ></span>
       </div>
     </div>
diff --git a/src/pages/StarterTips/page-5.vue b/src/pages/StarterTips/page-5.vue
index 6e5ccbda..7664ddc9 100644
--- a/src/pages/StarterTips/page-5.vue
+++ b/src/pages/StarterTips/page-5.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-const dots = [1, 2, 3, 4]
+const dots = [1, 2, 3, 4, 5, 6]
 </script>
 
 <template>
   <div class="h-full w-full flex flex-col">
-    <div class="bg-black-100 h-2/5 p-6">
+    <div class="h-2/5 p-6">
       <h1 class="text-xl uppercase font-black">Freedom Above All Else</h1>
       <p class="text-sm">
         Should you ever need to switch to a different Web3 wallet, you can
@@ -17,10 +17,9 @@ const dots = [1, 2, 3, 4]
           v-for="dot in dots"
           :key="dot"
           class="block h-[5px] w-[5px] rounded-full"
-          :class="dot === 3 ? 'bg-[#FFFFFF]' : 'bg-[#8D8D8D]'"
+          :class="dot === 5 ? 'bg-[#FFFFFF]' : 'bg-[#8D8D8D]'"
         ></span>
       </div>
     </div>
-    <div class="h-3/5 w-full relative bg-black-100 bg-opacity-80"></div>
   </div>
 </template>
diff --git a/src/pages/StarterTips/page-6.vue b/src/pages/StarterTips/page-6.vue
index ca8afc81..12871acb 100644
--- a/src/pages/StarterTips/page-6.vue
+++ b/src/pages/StarterTips/page-6.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-const dots = [1, 2, 3, 4]
+const dots = [1, 2, 3, 4, 5, 6]
 </script>
 
 <template>
   <div class="h-full w-full flex flex-col">
-    <div class="h-3/4 w-full bg-black-100 bg-opacity-80">
+    <div class="h-3/4 w-full">
       <div class="h-full w-full startertips">
         <div
           class="absolute z-[2147483648] w-36 h-36 top-[266px] right-8"
@@ -22,7 +22,7 @@ const dots = [1, 2, 3, 4]
           v-for="dot in dots"
           :key="dot"
           class="block h-[5px] w-[5px] rounded-full"
-          :class="dot === 4 ? 'bg-[#FFFFFF]' : 'bg-[#8D8D8D]'"
+          :class="dot === 6 ? 'bg-[#FFFFFF]' : 'bg-[#8D8D8D]'"
         ></span>
       </div>
     </div>

From ed7a63772c879075657b383f9e53f48c33ddb5e7 Mon Sep 17 00:00:00 2001
From: shrinathprabhu <shrinathprabhu.123@gmail.com>
Date: Wed, 21 Feb 2024 15:10:02 +0530
Subject: [PATCH 2/6] Add slide to solve puzzle 1st iteration

---
 src/assets/images/check-mark.svg             |  14 ++
 src/assets/images/puzzle-piece-1-outline.svg |   7 +
 src/assets/images/puzzle-piece-1.svg         |   7 +
 src/components/SendTransaction.vue           |  91 ++++----
 src/components/SendTransactionCompact.vue    |  13 +-
 src/components/SlideToSolvePuzzle.vue        | 225 +++++++++++++++++++
 src/store/app.ts                             |   4 +-
 tailwind.config.js                           |   7 +
 8 files changed, 323 insertions(+), 45 deletions(-)
 create mode 100644 src/assets/images/check-mark.svg
 create mode 100644 src/assets/images/puzzle-piece-1-outline.svg
 create mode 100644 src/assets/images/puzzle-piece-1.svg
 create mode 100644 src/components/SlideToSolvePuzzle.vue

diff --git a/src/assets/images/check-mark.svg b/src/assets/images/check-mark.svg
new file mode 100644
index 00000000..c4e2fef1
--- /dev/null
+++ b/src/assets/images/check-mark.svg
@@ -0,0 +1,14 @@
+<svg fill="#000000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 width="800px" height="800px" viewBox="0 0 305.002 305.002"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M152.502,0.001C68.412,0.001,0,68.412,0,152.501s68.412,152.5,152.502,152.5c84.089,0,152.5-68.411,152.5-152.5
+			S236.591,0.001,152.502,0.001z M152.502,280.001C82.197,280.001,25,222.806,25,152.501c0-70.304,57.197-127.5,127.502-127.5
+			c70.304,0,127.5,57.196,127.5,127.5C280.002,222.806,222.806,280.001,152.502,280.001z"/>
+		<path d="M218.473,93.97l-90.546,90.547l-41.398-41.398c-4.882-4.881-12.796-4.881-17.678,0c-4.881,4.882-4.881,12.796,0,17.678
+			l50.237,50.237c2.441,2.44,5.64,3.661,8.839,3.661c3.199,0,6.398-1.221,8.839-3.661l99.385-99.385
+			c4.881-4.882,4.881-12.796,0-17.678C231.269,89.089,223.354,89.089,218.473,93.97z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/images/puzzle-piece-1-outline.svg b/src/assets/images/puzzle-piece-1-outline.svg
new file mode 100644
index 00000000..00b3917c
--- /dev/null
+++ b/src/assets/images/puzzle-piece-1-outline.svg
@@ -0,0 +1,7 @@
+<svg width="122" height="122" viewBox="0 0 122 122" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_404_245" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 100C1.34315 100 0 98.6569 0 97L0 3C0 1.34315 1.34314 0 3 0L97 0C98.6569 0 100 1.34315 100 3L100 31.7509C100 34.0108 102.472 35.5173 104.706 35.1744C105.454 35.0596 106.22 35 107 35C115.284 35 122 41.7157 122 50C122 58.2843 115.284 65 107 65C106.22 65 105.454 64.9404 104.706 64.8256C102.472 64.4827 100 65.9892 100 68.249V97C100 98.6569 98.6569 100 97 100H68.2491C65.9892 100 64.4827 102.472 64.8256 104.706C64.9404 105.454 65 106.22 65 107C65 115.284 58.2843 122 50 122C41.7157 122 35 115.284 35 107C35 106.22 35.0596 105.454 35.1744 104.706C35.5173 102.472 34.0108 100 31.751 100L3 100Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 100C1.34315 100 0 98.6569 0 97L0 3C0 1.34315 1.34314 0 3 0L97 0C98.6569 0 100 1.34315 100 3L100 31.7509C100 34.0108 102.472 35.5173 104.706 35.1744C105.454 35.0596 106.22 35 107 35C115.284 35 122 41.7157 122 50C122 58.2843 115.284 65 107 65C106.22 65 105.454 64.9404 104.706 64.8256C102.472 64.4827 100 65.9892 100 68.249V97C100 98.6569 98.6569 100 97 100H68.2491C65.9892 100 64.4827 102.472 64.8256 104.706C64.9404 105.454 65 106.22 65 107C65 115.284 58.2843 122 50 122C41.7157 122 35 115.284 35 107C35 106.22 35.0596 105.454 35.1744 104.706C35.5173 102.472 34.0108 100 31.751 100L3 100Z" fill="black"/>
+<path d="M100 31.7509L96 31.7509L100 31.7509ZM104.706 35.1744L104.099 31.2207L104.706 35.1744ZM35.1744 104.706L31.2207 104.099L35.1744 104.706ZM31.751 100L31.751 96L31.751 100ZM97 0V-4V0ZM100 3L104 3L100 3ZM3 100L3 104L3 100ZM3 0L3 -4L3 0ZM-4 3L-4 97H4L4 3L-4 3ZM97 -4L3 -4L3 4L97 4V-4ZM104 31.7509L104 3L96 3L96 31.7509L104 31.7509ZM107 31C106.016 31 105.047 31.0751 104.099 31.2207L105.312 39.1281C105.86 39.044 106.424 39 107 39V31ZM126 50C126 39.5066 117.493 31 107 31V39C113.075 39 118 43.9249 118 50H126ZM107 69C117.493 69 126 60.4934 126 50H118C118 56.0751 113.075 61 107 61V69ZM104.099 68.7793C105.047 68.9249 106.016 69 107 69V61C106.424 61 105.86 60.956 105.312 60.8719L104.099 68.7793ZM104 97V68.249H96V97H104ZM68.2491 104H97V96H68.2491V104ZM60.8719 105.312C60.956 105.86 61 106.424 61 107H69C69 106.016 68.9249 105.047 68.7793 104.099L60.8719 105.312ZM61 107C61 113.075 56.0751 118 50 118V126C60.4934 126 69 117.493 69 107H61ZM50 118C43.9249 118 39 113.075 39 107H31C31 117.493 39.5066 126 50 126V118ZM39 107C39 106.424 39.044 105.86 39.1281 105.312L31.2207 104.099C31.0751 105.047 31 106.016 31 107H39ZM3 104L31.751 104L31.751 96L3 96L3 104ZM68.2491 96C65.5315 96 63.4595 97.5102 62.2642 99.2504C61.0918 100.957 60.5408 103.155 60.8719 105.312L68.7793 104.099C68.7763 104.079 68.7731 104.023 68.7919 103.943C68.811 103.862 68.8415 103.804 68.8584 103.78C68.8754 103.755 68.8489 103.805 68.7393 103.87C68.6148 103.943 68.4376 104 68.2491 104V96ZM96 97C96 96.4477 96.4477 96 97 96V104C100.866 104 104 100.866 104 97H96ZM96 31.7509C96 34.4685 97.5102 36.5405 99.2504 37.7358C100.957 38.9082 103.155 39.4592 105.312 39.1281L104.099 31.2207C104.079 31.2237 104.023 31.2269 103.943 31.2081C103.862 31.189 103.804 31.1585 103.78 31.1416C103.755 31.1246 103.805 31.1511 103.87 31.2607C103.943 31.3852 104 31.5624 104 31.7509L96 31.7509ZM105.312 60.8719C103.155 60.5408 100.957 61.0918 99.2504 62.2642C97.5102 63.4595 96 65.5315 96 68.249H104C104 68.4376 103.943 68.6148 103.87 68.7393C103.805 68.8489 103.755 68.8754 103.78 68.8584C103.804 68.8415 103.862 68.811 103.943 68.7919C104.023 68.7731 104.079 68.7763 104.099 68.7793L105.312 60.8719ZM39.1281 105.312C39.4592 103.155 38.9082 100.957 37.7358 99.2504C36.5405 97.5102 34.4685 96 31.751 96L31.751 104C31.5624 104 31.3852 103.943 31.2607 103.87C31.1511 103.805 31.1246 103.755 31.1416 103.78C31.1585 103.804 31.189 103.862 31.2081 103.943C31.2269 104.023 31.2237 104.079 31.2207 104.099L39.1281 105.312ZM97 4C96.4477 4 96 3.55228 96 3L104 3C104 -0.865992 100.866 -4 97 -4V4ZM-4 97C-4 100.866 -0.865988 104 3 104L3 96C3.55228 96 4 96.4477 4 97H-4ZM4 3C4 3.55228 3.55229 4 3 4L3 -4C-0.866001 -4 -4 -0.865988 -4 3L4 3Z" fill="white" mask="url(#path-1-inside-1_404_245)"/>
+</svg>
diff --git a/src/assets/images/puzzle-piece-1.svg b/src/assets/images/puzzle-piece-1.svg
new file mode 100644
index 00000000..d3c8217a
--- /dev/null
+++ b/src/assets/images/puzzle-piece-1.svg
@@ -0,0 +1,7 @@
+<svg width="122" height="122" viewBox="0 0 122 122" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_404_178" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 100C1.34315 100 0 98.6569 0 97L0 3C0 1.34315 1.34314 0 3 0L97 0C98.6569 0 100 1.34315 100 3V31.7509C100 34.0108 102.472 35.5173 104.706 35.1744C105.454 35.0596 106.22 35 107 35C115.284 35 122 41.7157 122 50C122 58.2843 115.284 65 107 65C106.22 65 105.454 64.9404 104.706 64.8256C102.472 64.4827 100 65.9892 100 68.249V97C100 98.6569 98.6569 100 97 100H68.2491C65.9892 100 64.4827 102.472 64.8256 104.706C64.9404 105.454 65 106.22 65 107C65 115.284 58.2843 122 50 122C41.7157 122 35 115.284 35 107C35 106.22 35.0596 105.454 35.1744 104.706C35.5173 102.472 34.0108 100 31.751 100H3Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 100C1.34315 100 0 98.6569 0 97L0 3C0 1.34315 1.34314 0 3 0L97 0C98.6569 0 100 1.34315 100 3V31.7509C100 34.0108 102.472 35.5173 104.706 35.1744C105.454 35.0596 106.22 35 107 35C115.284 35 122 41.7157 122 50C122 58.2843 115.284 65 107 65C106.22 65 105.454 64.9404 104.706 64.8256C102.472 64.4827 100 65.9892 100 68.249V97C100 98.6569 98.6569 100 97 100H68.2491C65.9892 100 64.4827 102.472 64.8256 104.706C64.9404 105.454 65 106.22 65 107C65 115.284 58.2843 122 50 122C41.7157 122 35 115.284 35 107C35 106.22 35.0596 105.454 35.1744 104.706C35.5173 102.472 34.0108 100 31.751 100H3Z" fill="white"/>
+<path d="M104.706 35.1744L104.099 31.2207L104.706 35.1744ZM35.1744 104.706L31.2207 104.099L35.1744 104.706ZM-4 3L-4 97H4L4 3L-4 3ZM97 -4L3 -4L3 4L97 4V-4ZM104 31.7509V3L96 3V31.7509L104 31.7509ZM107 31C106.016 31 105.047 31.0751 104.099 31.2207L105.312 39.1281C105.86 39.044 106.424 39 107 39V31ZM126 50C126 39.5066 117.493 31 107 31V39C113.075 39 118 43.9249 118 50H126ZM107 69C117.493 69 126 60.4934 126 50H118C118 56.0751 113.075 61 107 61V69ZM104.099 68.7793C105.047 68.9249 106.016 69 107 69V61C106.424 61 105.86 60.956 105.312 60.8719L104.099 68.7793ZM104 97V68.249H96V97H104ZM68.2491 104H97V96H68.2491V104ZM60.8719 105.312C60.956 105.86 61 106.424 61 107H69C69 106.016 68.9249 105.047 68.7793 104.099L60.8719 105.312ZM61 107C61 113.075 56.0751 118 50 118V126C60.4934 126 69 117.493 69 107H61ZM50 118C43.9249 118 39 113.075 39 107H31C31 117.493 39.5066 126 50 126V118ZM39 107C39 106.424 39.044 105.86 39.1281 105.312L31.2207 104.099C31.0751 105.047 31 106.016 31 107H39ZM3 104H31.751L31.751 96H3L3 104ZM68.2491 96C65.5315 96 63.4595 97.5102 62.2642 99.2504C61.0918 100.957 60.5408 103.155 60.8719 105.312L68.7793 104.099C68.7763 104.079 68.7731 104.023 68.7919 103.943C68.811 103.862 68.8415 103.804 68.8584 103.78C68.8754 103.755 68.8489 103.805 68.7393 103.87C68.6148 103.943 68.4376 104 68.2491 104V96ZM96 97C96 96.4477 96.4477 96 97 96V104C100.866 104 104 100.866 104 97H96ZM96 31.7509C96 34.4685 97.5102 36.5405 99.2504 37.7358C100.957 38.9082 103.155 39.4592 105.312 39.1281L104.099 31.2207C104.079 31.2237 104.023 31.2269 103.943 31.2081C103.862 31.189 103.804 31.1585 103.78 31.1416C103.755 31.1246 103.805 31.1511 103.87 31.2607C103.943 31.3852 104 31.5624 104 31.7509L96 31.7509ZM105.312 60.8719C103.155 60.5408 100.957 61.0918 99.2504 62.2642C97.5102 63.4595 96 65.5315 96 68.249H104C104 68.4376 103.943 68.6148 103.87 68.7393C103.805 68.8489 103.755 68.8754 103.78 68.8584C103.804 68.8415 103.862 68.811 103.943 68.7919C104.023 68.7731 104.079 68.7763 104.099 68.7793L105.312 60.8719ZM39.1281 105.312C39.4592 103.155 38.9082 100.957 37.7358 99.2504C36.5405 97.5102 34.4685 96 31.751 96L31.751 104C31.5624 104 31.3852 103.943 31.2607 103.87C31.1511 103.805 31.1246 103.755 31.1416 103.78C31.1585 103.804 31.189 103.862 31.2081 103.943C31.2269 104.023 31.2237 104.079 31.2207 104.099L39.1281 105.312ZM97 4C96.4477 4 96 3.55228 96 3L104 3C104 -0.865992 100.866 -4 97 -4V4ZM-4 97C-4 100.866 -0.865988 104 3 104L3 96C3.55228 96 4 96.4477 4 97H-4ZM4 3C4 3.55228 3.55229 4 3 4L3 -4C-0.866001 -4 -4 -0.865988 -4 3L4 3Z" fill="white" mask="url(#path-1-inside-1_404_178)"/>
+</svg>
diff --git a/src/components/SendTransaction.vue b/src/components/SendTransaction.vue
index 1d2db699..908db15b 100644
--- a/src/components/SendTransaction.vue
+++ b/src/components/SendTransaction.vue
@@ -8,6 +8,7 @@ import AppLoader from '@/components/AppLoader.vue'
 import GasPrice from '@/components/GasPrice.vue'
 import SendTransactionCompact from '@/components/SendTransactionCompact.vue'
 import SignMessageAdvancedInfo from '@/components/signMessageAdvancedInfo.vue'
+import SlideToSolvePuzzle from '@/components/SlideToSolvePuzzle.vue'
 import { useAppStore } from '@/store/app'
 import useCurrencyStore from '@/store/currencies'
 import { useRequestStore } from '@/store/request'
@@ -55,50 +56,58 @@ function hideLoader() {
 
 onMounted(async () => {
   showLoader('Loading...')
-  try {
-    const accountHandler = getRequestHandler().getAccountHandler()
-    if (appStore.chainType === ChainType.solana_cv25519) {
+  const accountHandler = getRequestHandler().getAccountHandler()
+  if (appStore.chainType === ChainType.solana_cv25519) {
+    try {
       const data = await (accountHandler as SolanaAccountHandler).getFee(
         props.request.request.params[0]
       )
-    } else {
-      const baseGasPrice = (
-        await (accountHandler as EVMAccountHandler).provider.getGasPrice()
-      ).toString()
+    } catch (e) {
+      console.error(e)
+    }
+  } else {
+    try {
       gasLimit.value = (
         await (accountHandler as EVMAccountHandler).provider.estimateGas({
           ...sanitizeRequest(props.request.request).params[0],
         })
       ).toString()
-      baseFee.value = new Decimal(baseGasPrice)
-        .div(Decimal.pow(10, 9))
-        .toString()
+    } catch (e) {
+      gasLimit.value = '21000' // default value for ethereum
     }
-    if (props.request.request.params[0].maxFeePerGas) {
-      customGasPrice.value.maxFeePerGas = new Decimal(
-        props.request.request.params[0].maxFeePerGas
-      )
-        .div(Decimal.pow(10, 9))
-        .toString()
-    } else {
-      customGasPrice.value.maxFeePerGas = new Decimal(baseFee.value)
-        .add(1.5)
-        .toString()
-    }
-    if (props.request.request.params[0].maxPriorityFeePerGas) {
-      customGasPrice.value.maxPriorityFeePerGas = new Decimal(
-        props.request.request.params[0].maxPriorityFeePerGas
-      )
+    try {
+      const baseGasPrice = (
+        await (accountHandler as EVMAccountHandler).provider.getGasPrice()
+      ).toString()
+      baseFee.value = new Decimal(baseGasPrice)
         .div(Decimal.pow(10, 9))
         .toString()
+      if (props.request.request.params[0].maxFeePerGas) {
+        customGasPrice.value.maxFeePerGas = new Decimal(
+          props.request.request.params[0].maxFeePerGas
+        )
+          .div(Decimal.pow(10, 9))
+          .toString()
+      } else {
+        customGasPrice.value.maxFeePerGas = new Decimal(baseFee.value)
+          .add(1.5)
+          .toString()
+      }
+      if (props.request.request.params[0].maxPriorityFeePerGas) {
+        customGasPrice.value.maxPriorityFeePerGas = new Decimal(
+          props.request.request.params[0].maxPriorityFeePerGas
+        )
+          .div(Decimal.pow(10, 9))
+          .toString()
+      }
+      customGasPrice.value.gasLimit =
+        props.request.request.params[0].gasLimit || gasLimit.value
+      handleSetGasPrice(customGasPrice.value)
+    } catch (err) {
+      console.log({ err })
+    } finally {
+      hideLoader()
     }
-    customGasPrice.value.gasLimit =
-      props.request.request.params[0].gasLimit || gasLimit.value
-    handleSetGasPrice(customGasPrice.value)
-  } catch (err) {
-    console.log({ err })
-  } finally {
-    hideLoader()
   }
 })
 
@@ -299,14 +308,7 @@ function calculateCurrencyValue(value) {
       v-if="route.name !== 'PermissionRequest'"
       class="mt-auto flex flex-col gap-4"
     >
-      <div v-if="request.requestOrigin === 'auth-verify'">
-        <button
-          class="btn-secondary p-2 uppercase w-full text-sm font-bold"
-          @click="emits('proceed')"
-        >
-          Proceed
-        </button>
-      </div>
+      <SlideToSolvePuzzle v-if="!appStore.global" @solved="emits('approve')" />
       <div v-else class="flex gap-2">
         <button
           class="btn-secondary p-2 uppercase w-full text-sm font-bold"
@@ -325,8 +327,15 @@ function calculateCurrencyValue(value) {
         v-if="
           route.name === 'requests' && appStore.validAppMode === AppMode.Full
         "
-        class="flex items-center justify-center"
+        class="flex items-center justify-evenly"
       >
+        <button
+          v-if="!appStore.global"
+          class="btn-tertiary text-sm font-bold"
+          @click="emits('reject')"
+        >
+          Reject
+        </button>
         <button
           class="btn-tertiary text-sm font-bold"
           @click.stop="requestStore.skipRequest(request.request.id)"
diff --git a/src/components/SendTransactionCompact.vue b/src/components/SendTransactionCompact.vue
index f440593f..0522aa4a 100644
--- a/src/components/SendTransactionCompact.vue
+++ b/src/components/SendTransactionCompact.vue
@@ -4,6 +4,7 @@ import { Decimal } from 'decimal.js'
 import { computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 
+import SlideToSolvePuzzle from '@/components/SlideToSolvePuzzle.vue'
 import { useAppStore } from '@/store/app'
 import useCurrencyStore from '@/store/currencies'
 import { useParentConnectionStore } from '@/store/parentConnection'
@@ -140,7 +141,8 @@ async function onViewDetails() {
       </button>
     </div>
     <div class="flex flex-col gap-4">
-      <div class="flex gap-2 text-sm font-bold">
+      <SlideToSolvePuzzle v-if="!appStore.global" @solved="emits('approve')" />
+      <div v-else class="flex gap-2 text-sm font-bold">
         <button
           class="uppercase w-full btn-secondary p-2"
           @click="emits('reject')"
@@ -158,8 +160,15 @@ async function onViewDetails() {
         v-if="
           route.name === 'requests' && appStore.validAppMode === AppMode.Full
         "
-        class="flex items-center justify-center"
+        class="flex items-center justify-evenly"
       >
+        <button
+          v-if="!appStore.global"
+          class="btn-tertiary text-sm font-bold"
+          @click="emits('reject')"
+        >
+          Reject
+        </button>
         <button
           class="btn-tertiary text-sm font-bold"
           @click.stop="requestStore.skipRequest(request.request.id)"
diff --git a/src/components/SlideToSolvePuzzle.vue b/src/components/SlideToSolvePuzzle.vue
new file mode 100644
index 00000000..18d6b22c
--- /dev/null
+++ b/src/components/SlideToSolvePuzzle.vue
@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+import { getImage } from '@/utils/getImage'
+
+const translateUntil = ref('0')
+const isIntersecting = ref(false)
+const isDragging = ref(false)
+const swiperEl = ref<HTMLButtonElement | null>(null)
+const puzzlePieceSource = ref<HTMLImageElement | null>(null)
+const puzzlePieceDestination = ref<HTMLImageElement | null>(null)
+const emit = defineEmits(['solved'])
+const puzzleText = ref('Slide to solve the puzzle')
+const isPuzzleRefreshing = ref(false)
+
+onMounted(() => {
+  const destination = puzzlePieceDestination.value
+  if (destination) {
+    destination.style.transform = `translateX(-${getRandomDestinationPlacement()})`
+  }
+  document.body.onmouseup = (e) => {
+    handleDragEnd()
+  }
+  document.body.ontouchend = (e) => {
+    handleDragEnd()
+  }
+  document.body.ontouchcancel = (e) => {
+    handleDragEnd()
+  }
+})
+
+onBeforeUnmount(() => {
+  document.body.onmouseup = null
+  document.body.ontouchend = null
+  document.body.ontouchcancel = null
+})
+
+function getRandomDestinationPlacement() {
+  const randomPlacement = Math.floor(Math.random() * 80)
+  return `${randomPlacement}px`
+}
+
+function checkIntersection() {
+  const source = puzzlePieceSource.value
+  const destination = puzzlePieceDestination.value
+  if (source && destination) {
+    const sourceRect = source.getBoundingClientRect()
+    const destinationRect = destination.getBoundingClientRect()
+    return (
+      sourceRect.right >= destinationRect.right - 2 &&
+      sourceRect.right <= destinationRect.right + 2
+    )
+  }
+  return false
+}
+
+function handleDrag(e) {
+  const swiper = swiperEl.value
+  if (isDragging.value && swiper && swiper.parentElement) {
+    let clientX
+    if (e.type === 'touchmove') {
+      clientX = e.touches[0].layerX
+    } else {
+      clientX = e.layerX
+    }
+    if (clientX >= swiper.parentElement.clientWidth - swiper.clientWidth) {
+      clientX = swiper.parentElement.clientWidth - swiper.clientWidth
+    }
+    translateUntil.value = `${clientX}px`
+    isIntersecting.value = checkIntersection()
+  }
+}
+
+function handleDragEnd() {
+  isDragging.value = false
+  if (isIntersecting.value) {
+    const swiper = swiperEl.value
+    if (swiper) {
+      swiper.style.transform = ''
+    }
+    puzzleText.value = 'Puzzle Solved'
+    emit('solved')
+  } else {
+    translateUntil.value = '0'
+    isPuzzleRefreshing.value = true
+    const destination = puzzlePieceDestination.value
+    if (destination) {
+      destination.style.transform = `translateX(-${getRandomDestinationPlacement()})`
+    }
+    setTimeout(() => {
+      isPuzzleRefreshing.value = false
+    }, 1000)
+  }
+}
+
+function handleDragStart(e) {
+  const swiper = swiperEl.value
+  if (
+    swiper &&
+    e.clientX <= swiper.getBoundingClientRect().right &&
+    e.clientX >= swiper.getBoundingClientRect().left
+  ) {
+    isDragging.value = true
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <div
+      class="h-[80px] w-[264px] rounded-md mx-auto p-4 overflow-hidden bg-black-100"
+    >
+      <div class="relative flex items-center h-full w-full isolate">
+        <img
+          ref="puzzlePieceSource"
+          src="@/assets/images/puzzle-piece-1.svg"
+          class="h-10 w-10 absolute left-0 transition duration-150 z-[100]"
+          :style="{
+            transform: `translateX(${translateUntil})`,
+          }"
+        />
+        <img
+          ref="puzzlePieceDestination"
+          src="@/assets/images/puzzle-piece-1-outline.svg"
+          class="absolute h-10 w-10 right-0 transition z-[10] transition duration-150"
+          :class="{
+            'drop-shadow-glow': isIntersecting,
+          }"
+        />
+        <div
+          v-if="isPuzzleRefreshing"
+          class="absolute inset-0 bg-black-100 z-[1000] flex flex-col gap-1 items-center justify-center"
+        >
+          <img
+            src="@/assets/images/dark/refresh.svg"
+            class="w-5 h-5 animate-spin"
+          />
+          <span class="text-gray-100 text-[12px]">Refreshing...</span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="h-10 w-full card w-[250px] mx-auto rounded-[5px] p-[3px] bg-white-100 dark:bg-black-100 border border-solid broder-gray-100 overflow-hidden"
+    >
+      <div
+        class="relative rounded-[2px] w-full h-8 overflow-hidden"
+        @touchstart="handleDragStart"
+        @touchend="handleDragEnd"
+        @mousedown="handleDragStart"
+        @mouseup="handleDragEnd"
+        @mousemove="handleDrag"
+        @touchmove="handleDrag"
+        @touchcancel="handleDragEnd"
+      >
+        <button
+          ref="swiperEl"
+          class="relative btn-primary w-[40px] h-full rounded-[2px] z-10 transition duration-150 flex justify-center items-center"
+          :style="{
+            transform: `translateX(${translateUntil})`,
+          }"
+        >
+          <div
+            v-if="!isIntersecting"
+            class="relative flex items-center justify-center w-[20%] select-none"
+          >
+            <img
+              :src="getImage('slider-right.svg')"
+              class="select-none animate-1"
+            />
+            <img
+              :src="getImage('slider-right.svg')"
+              class="select-none animate-2"
+            />
+            <img
+              :src="getImage('slider-right.svg')"
+              class="select-none animate-3"
+            />
+          </div>
+          <img
+            v-else
+            src="@/assets/images/check-mark.svg"
+            class="w-5 h-5 select-none"
+          />
+          <div class="absolute z-[100] inset-0 w-full h-full"></div>
+        </button>
+        <div class="absolute z-[1] flex inset-0 items-center justify-center">
+          <span class="text-gray-100 text-[12px] select-none">{{
+            puzzleText
+          }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.animate-1,
+.animate-2,
+.animate-3 {
+  opacity: 0.1;
+  animation: fade 1.2s infinite;
+}
+
+.animate-2 {
+  animation-delay: 0.15s;
+}
+
+.animate-3 {
+  animation-delay: 0.3s;
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0.1;
+  }
+
+  40% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 0.1;
+  }
+}
+</style>
diff --git a/src/store/app.ts b/src/store/app.ts
index 14c7e4b8..b38d5914 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -74,8 +74,8 @@ export const useAppStore = defineStore('app', {
               ? requestStore.pendingRequest?.request.method ===
                 'eth_sendTransaction'
                 ? AUTH_NETWORK === 'mainnet'
-                  ? '364px'
-                  : '400px'
+                  ? '464px'
+                  : '480px'
                 : AUTH_NETWORK === 'mainnet'
                 ? '296px'
                 : '326px'
diff --git a/tailwind.config.js b/tailwind.config.js
index 6fc60fe8..22df99f5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -88,6 +88,13 @@ module.exports = {
       content: {
         blank: '""',
       },
+      dropShadow: {
+        glow: [
+          '-4px -4px 16px rgba(255,255,255, 0.35)',
+          '4px 4px 16px rgba(255,255,255, 0.35)',
+          '0px 0px 4px rgba(255,255,255, 0.6)',
+        ],
+      },
     },
   },
 }

From 11b06ec96b910a19c4295219c7394cdcec0ba501 Mon Sep 17 00:00:00 2001
From: shrinathprabhu <shrinathprabhu.123@gmail.com>
Date: Wed, 21 Feb 2024 15:14:38 +0530
Subject: [PATCH 3/6] Make it available for global apps

---
 src/components/SendTransaction.vue        | 4 ++--
 src/components/SendTransactionCompact.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/SendTransaction.vue b/src/components/SendTransaction.vue
index 908db15b..2bb0c349 100644
--- a/src/components/SendTransaction.vue
+++ b/src/components/SendTransaction.vue
@@ -308,7 +308,7 @@ function calculateCurrencyValue(value) {
       v-if="route.name !== 'PermissionRequest'"
       class="mt-auto flex flex-col gap-4"
     >
-      <SlideToSolvePuzzle v-if="!appStore.global" @solved="emits('approve')" />
+      <SlideToSolvePuzzle v-if="appStore.global" @solved="emits('approve')" />
       <div v-else class="flex gap-2">
         <button
           class="btn-secondary p-2 uppercase w-full text-sm font-bold"
@@ -330,7 +330,7 @@ function calculateCurrencyValue(value) {
         class="flex items-center justify-evenly"
       >
         <button
-          v-if="!appStore.global"
+          v-if="appStore.global"
           class="btn-tertiary text-sm font-bold"
           @click="emits('reject')"
         >
diff --git a/src/components/SendTransactionCompact.vue b/src/components/SendTransactionCompact.vue
index 0522aa4a..4eaffe86 100644
--- a/src/components/SendTransactionCompact.vue
+++ b/src/components/SendTransactionCompact.vue
@@ -141,7 +141,7 @@ async function onViewDetails() {
       </button>
     </div>
     <div class="flex flex-col gap-4">
-      <SlideToSolvePuzzle v-if="!appStore.global" @solved="emits('approve')" />
+      <SlideToSolvePuzzle v-if="appStore.global" @solved="emits('approve')" />
       <div v-else class="flex gap-2 text-sm font-bold">
         <button
           class="uppercase w-full btn-secondary p-2"
@@ -163,7 +163,7 @@ async function onViewDetails() {
         class="flex items-center justify-evenly"
       >
         <button
-          v-if="!appStore.global"
+          v-if="appStore.global"
           class="btn-tertiary text-sm font-bold"
           @click="emits('reject')"
         >

From 31d6f8e7d8124c694457817af4bacbde6ac9aa1f Mon Sep 17 00:00:00 2001
From: shrinathprabhu <shrinathprabhu.123@gmail.com>
Date: Wed, 21 Feb 2024 16:55:54 +0530
Subject: [PATCH 4/6] Center mouse pointer

---
 src/components/SlideToSolvePuzzle.vue | 44 +++++++++++++++------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/SlideToSolvePuzzle.vue b/src/components/SlideToSolvePuzzle.vue
index 18d6b22c..1bfdef42 100644
--- a/src/components/SlideToSolvePuzzle.vue
+++ b/src/components/SlideToSolvePuzzle.vue
@@ -12,6 +12,7 @@ const puzzlePieceDestination = ref<HTMLImageElement | null>(null)
 const emit = defineEmits(['solved'])
 const puzzleText = ref('Slide to solve the puzzle')
 const isPuzzleRefreshing = ref(false)
+const isSwiperFocused = ref(false)
 
 onMounted(() => {
   const destination = puzzlePieceDestination.value
@@ -47,8 +48,8 @@ function checkIntersection() {
     const sourceRect = source.getBoundingClientRect()
     const destinationRect = destination.getBoundingClientRect()
     return (
-      sourceRect.right >= destinationRect.right - 2 &&
-      sourceRect.right <= destinationRect.right + 2
+      sourceRect.right >= destinationRect.right - 1 &&
+      sourceRect.right <= destinationRect.right + 1
     )
   }
   return false
@@ -63,6 +64,7 @@ function handleDrag(e) {
     } else {
       clientX = e.layerX
     }
+    clientX = clientX - swiper.clientWidth / 2
     if (clientX >= swiper.parentElement.clientWidth - swiper.clientWidth) {
       clientX = swiper.parentElement.clientWidth - swiper.clientWidth
     }
@@ -72,28 +74,32 @@ function handleDrag(e) {
 }
 
 function handleDragEnd() {
-  isDragging.value = false
-  if (isIntersecting.value) {
-    const swiper = swiperEl.value
-    if (swiper) {
-      swiper.style.transform = ''
-    }
-    puzzleText.value = 'Puzzle Solved'
-    emit('solved')
-  } else {
-    translateUntil.value = '0'
-    isPuzzleRefreshing.value = true
-    const destination = puzzlePieceDestination.value
-    if (destination) {
-      destination.style.transform = `translateX(-${getRandomDestinationPlacement()})`
+  if (isSwiperFocused.value) {
+    isDragging.value = false
+    if (isIntersecting.value) {
+      const swiper = swiperEl.value
+      if (swiper) {
+        swiper.style.transform = ''
+      }
+      puzzleText.value = 'Puzzle Solved'
+      emit('solved')
+    } else {
+      translateUntil.value = '0'
+      isPuzzleRefreshing.value = true
+      const destination = puzzlePieceDestination.value
+      if (destination) {
+        destination.style.transform = `translateX(-${getRandomDestinationPlacement()})`
+      }
+      setTimeout(() => {
+        isPuzzleRefreshing.value = false
+      }, 1000)
     }
-    setTimeout(() => {
-      isPuzzleRefreshing.value = false
-    }, 1000)
+    isSwiperFocused.value = false
   }
 }
 
 function handleDragStart(e) {
+  isSwiperFocused.value = true
   const swiper = swiperEl.value
   if (
     swiper &&

From f947e098c3f877dd9570bfc5a7df23fed0a31562 Mon Sep 17 00:00:00 2001
From: shrinathprabhu <shrinathprabhu.123@gmail.com>
Date: Wed, 21 Feb 2024 17:00:38 +0530
Subject: [PATCH 5/6] Dont go below 0

---
 src/components/SlideToSolvePuzzle.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/SlideToSolvePuzzle.vue b/src/components/SlideToSolvePuzzle.vue
index 1bfdef42..ac1c79a2 100644
--- a/src/components/SlideToSolvePuzzle.vue
+++ b/src/components/SlideToSolvePuzzle.vue
@@ -67,6 +67,8 @@ function handleDrag(e) {
     clientX = clientX - swiper.clientWidth / 2
     if (clientX >= swiper.parentElement.clientWidth - swiper.clientWidth) {
       clientX = swiper.parentElement.clientWidth - swiper.clientWidth
+    } else if (clientX <= swiper.clientWidth / 2) {
+      clientX = 0
     }
     translateUntil.value = `${clientX}px`
     isIntersecting.value = checkIntersection()

From c50438f74e580e68e38c5cd91e0856c7e47f47f6 Mon Sep 17 00:00:00 2001
From: shrinathprabhu <shrinathprabhu.123@gmail.com>
Date: Thu, 22 Feb 2024 10:55:04 +0530
Subject: [PATCH 6/6] Remove white text in export key

---
 src/pages/profileScreen.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/profileScreen.vue b/src/pages/profileScreen.vue
index d4ca137f..2b36c1ee 100644
--- a/src/pages/profileScreen.vue
+++ b/src/pages/profileScreen.vue
@@ -253,12 +253,12 @@ watch(
       >
         <span class="text-sm text-gray-100">Private Key</span>
         <button
-          class="flex gap-2 items-cente disabled:opacity-100"
+          class="flex gap-2 items-center disabled:opacity-100"
           title="Click to export private key"
           :disabled="starterTipsStore.showExportkey"
           @click.stop="handleShowPrivateKeyCautionModal"
         >
-          <span class="text-lg font-bold text-white-100"> Export Key </span>
+          <span class="text-lg font-bold"> Export Key </span>
           <img :src="getImage('external-link.svg')" class="w-md h-md" />
         </button>
       </div>