style: replace j2only-slider with quasar slider

Author: ngutech21

package.json

@@ -23,7 +23,6 @@
     "@fedimint/core-web": "^0.0.10",
     "@getalby/bitcoin-connect": "^3.7.0",
     "@getalby/lightning-tools": "^5.1.2",
-    "@j2only/slide-unlock": "^0.5.11",
     "@nostr-dev-kit/ndk": "^2.12.2",
     "@quasar/extras": "^1.16.17",
     "@vueuse/core": "^12.8.2",

pnpm-lock.yaml

@@ -1,52 +1,63 @@
 <template>
-  <div>
-    <div class="text-h6 q-mb-md">Verify Payment Details</div>
+  <div class="payment-verification">
 
-    <q-card flat bordered>
+    <q-card flat class="glass-effect q-mb-lg">
       <q-card-section>
         <div class="row q-mb-sm">
-          <div class="col-4 text-weight-medium">Amount</div>
-          <div class="col">{{ decodedInvoice.amount }} sats</div>
+          <div class="col-4 text-weight-medium text-white-8">Amount</div>
+          <div class="col text-white text-weight-bold">{{ decodedInvoice.amount }} sats</div>
         </div>
 
         <div class="row q-mb-sm">
-          <div class="col-4 text-weight-medium">Description</div>
-          <div class="col">{{ decodedInvoice.description }}</div>
+          <div class="col-4 text-weight-medium text-white-8">Description</div>
+          <div class="col text-white text-weight-bold">{{ decodedInvoice.description }}</div>
         </div>
 
         <div class="row q-mb-sm">
-          <div class="col-4 text-weight-medium">Payment Hash</div>
-          <div class="col text-wrap">{{ decodedInvoice.paymentHash }}</div>
+          <div class="col-4 text-weight-medium text-white-8">Payment Hash</div>
+          <div class="col text-white text-weight-bold text-wrap">{{ decodedInvoice.paymentHash }}</div>
         </div>
 
         <div class="row q-mb-sm">
-          <div class="col-4 text-weight-medium">Expires</div>
-          <div class="col">{{ formatExpiry }}</div>
+          <div class="col-4 text-weight-medium text-white-8">Expires</div>
+          <div class="col text-white text-weight-bold">{{ formatExpiry }}</div>
         </div>
       </q-card-section>
     </q-card>
 
-    <SlideUnlock
-      ref="slideUnlock"
-      :auto-width="true"
-      :circle="true"
-      text="Slide to Pay"
-      success-text="Payment Confirmed!"
-      @completed="$emit('pay')"
-      class="q-mt-md"
-    />
+    <div class="q-mt-md payment-slider-container">
+      <q-slide-item
+        @left="$emit('pay')"
+        @action="onSlideAction"
+        left-color="transparent"
+        class="no-border payment-slider"
+      >
+        <template v-slot:left>
+          <div class="full-height full-width row justify-end items-center">
+            <q-icon name="check" size="32px" color="white" />
+          </div>
+        </template>
+
+        <div class="payment-slider-content">
+          <div class="slider-handle">
+            <q-icon name="bolt" color="white" size="20px" />
+          </div>
+          <div class="slider-text">Slide to Pay</div>
+        </div>
+      </q-slide-item>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed} from 'vue'
 import type { Bolt11Invoice } from 'src/components/models'
-import SlideUnlock from '@j2only/slide-unlock'
 
 const props = defineProps<{
   decodedInvoice: Bolt11Invoice
 }>()
 
+
 defineEmits<{
   cancel: []
   pay: []
@@ -58,13 +69,94 @@ const formatExpiry = computed(() => {
   return date.toLocaleString()
 })
 
-const slideUnlock = ref<InstanceType<typeof SlideUnlock> | null>(null)
+function onSlideAction({ side, reset }: { side: 'left' | 'right' | 'top' | 'bottom'; reset: () => void }) {
+  if (side === 'left') {
+    // If it's being slid to the left but not completed
+    setTimeout(() => {
+      reset()
+    }, 300)
+  }
+}
 </script>
 
 <style scoped>
 .text-wrap {
   word-break: break-all;
 }
-</style>
 
-<style></style>
+.payment-verification {
+  padding-bottom: 20px;
+}
+
+.text-white-8 {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Payment Slider Styling */
+.payment-slider-container {
+  position: relative;
+  width: 100%;
+  border-radius: 30px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.payment-slider {
+  height: 56px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 30px;
+}
+
+.payment-slider :deep(.q-slide-item__left .q-icon) {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.payment-slider:active :deep(.q-slide-item__left .q-icon) {
+  opacity: 1;
+}
+
+.payment-slider :deep(.q-slide-item__left) {
+  /* Remove the gradient background */
+  background: transparent !important;
+}
+
+.payment-slider-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 56px;
+  padding-left: 56px;
+}
+
+.slider-handle {
+  position: absolute;
+  left: 6px;
+  top: 8px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(145deg, var(--q-primary), #8000ff);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  z-index: 2;
+}
+
+.slider-text {
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+  font-size: larger;
+  letter-spacing: 0.5px;
+  z-index: 1;
+}
+
+/* Animation for successful slide */
+.q-slide-item__content {
+  transition: transform 0.3s;
+}
+</style>

src/components/VerifyPayment.vue

@@ -15,7 +15,7 @@
           <div class="q-px-md">
             <!-- Payment input section -->
             <template v-if="!decodedInvoice">
-              <q-card flat bordered class="bg-dark q-mb-md">
+              <q-card flat class="glass-effect q-mb-md">
                 <q-card-section>
                   <div class="text-subtitle2 text-grey q-mb-sm">
                     Enter Lightning Invoice or Address
@@ -39,7 +39,7 @@
 
               <!-- Amount input section (for lightning address) -->
               <q-slide-transition>
-                <q-card v-if="amountRequired" flat bordered class="bg-dark q-mb-md">
+                <q-card v-if="amountRequired" flat bordered class="glass-effect q-mb-md">
                   <q-card-section>
                     <div class="text-subtitle2 text-grey q-mb-sm">Payment Details</div>
 
@@ -269,6 +269,12 @@ async function payInvoice() {
 </script>
 
 <style scoped>
+.entry-container {
+  width: 100%;
+  max-width: 500px;
+  border-radius: 16px;
+}
+
 .custom-input :deep(.q-field__control) {
   background-color: rgba(255, 255, 255, 0.05);
 }