Merge pull request #11 from bitcoincoretech/issue_6

Issue 6
bitcoincoretech · Jun 2, 2021 · fde94bc · fde94bc
2 parents 421378c + e5e8bf5
commit fde94bc
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 190 deletions.
diff --git a/src/components/Bar.vue b/src/components/Bar.vue
diff --git a/src/components/Foo.vue b/src/components/Foo.vue
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
diff --git a/src/components/PayInvoice.vue b/src/components/PayInvoice.vue
@@ -85,12 +85,36 @@
           <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
         </div>
       </div>
+      <div v-else-if="showPaymentStatus">
+        <q-card-section dark bordered>
+          <p class="text-center">
+            <q-icon v-if="paymentDetails.isPayed" name="check_circle" size="5.5em" color="green" />
+            <q-spinner-bars v-else color="purple" size="5.5em" />
+          </p>
+          <p class="q-my-none text-h6 text-center">{{ paymentDetails.message }}</p>
+          <q-expansion-item
+            v-if="paymentDetails.details && paymentDetails.details.length"
+            group="extras"
+            icon="info"
+            class="bg-yellow-1"
+            label="Details"
+          >
+            <span v-html="paymentDetails.details"></span>
+          </q-expansion-item>
+        </q-card-section>
+
+        <div class="row q-mt-lg">
+          <q-space />
+          <q-btn v-close-popup flat color="grey" class="q-ml-auto cursor-pointer">Close</q-btn>
+          <q-space />
+        </div>
+      </div>
       <div v-else-if="showErrorDetais">
         <q-card-section dark bordered class="bg-red-5">
           <div class="text-h6">{{ error.title }}</div>
           <div class="text-subtitle2">{{ error.message }}</div>
         </q-card-section>
-        <q-expansion-item group="extras" class="bg-yellow-2" icon="info" label="Details">
+        <q-expansion-item group="extras" class="bg-yellow-2" icon="error" label="Details">
           <p class="text-wrap">
             {{ parse.data.request }}
           </p>
@@ -142,6 +166,11 @@ export default {
         },
         paymentChecker: null,
       },
+      paymentDetails: {
+        isPayed: false,
+        message: '...',
+        details: '',
+      },
       receive: {
         show: false,
         status: 'pending',
@@ -178,6 +207,9 @@ export default {
     showErrorDetais: function () {
       return this.currentView === 'error'
     },
+    showPaymentStatus: function () {
+      return this.currentView === 'paymentStatus'
+    },
   },
   filters: {
     msatoshiFormat: function (value) {
@@ -273,11 +305,8 @@ export default {
       this.balance = Math.round(response.data.balance / 1000)
     },
     payInvoice: async function () {
-      const dismissPaymentMsg = this.$q.notify({
-        timeout: 0,
-        message: 'Processing payment...',
-      })
       try {
+        this.showPaymentInProgressCard()
         const response = await lnbitsApi(this.serverUrl).payInvoice(
           this.activeWallet,
           this.parse.data.request
@@ -294,22 +323,18 @@ export default {
         this.parse.paymentChecker = setInterval(() => {
           if (payResponse.data.paid) {
             clearInterval(this.parse.paymentChecker)
-            dismissPaymentMsg()
-            this.closeDialog()
+            const preimageHtml = `<p class="text-wrap"><strong>Preimage: </strong> ${payResponse.data.preimage} </p>`
+            this.showPaymentCompentedCard(preimageHtml)
           }
-        }, 2000)
+        }, 1000)
       } catch (err) {
+        console.error('### err', JSON.stringify(err))
         this.showErrorCard(err, 'Cannot pay BOLT11 invoice!')
-        dismissPaymentMsg()
       }
     },
     payLnurl: async function () {
-      const dismissPaymentMsg = this.$q.notify({
-        timeout: 0,
-        message: 'Processing payment...',
-      })
-
       try {
+        this.showPaymentInProgressCard()
         const response = await lnbitsApi(this.serverUrl).payLnurl(
           this.activeWallet,
           this.parse.lnurlpay.callback,
@@ -329,38 +354,28 @@ export default {
             response.data.payment_hash
           )
           if (res.data.paid) {
-            // this.showDialog = false
-            dismissPaymentMsg()
             clearInterval(this.parse.paymentChecker)
 
             // show lnurlpay success action
             if (response.data.success_action) {
               switch (response.data.success_action.tag) {
                 case 'url':
-                  this.$q.notify({
-                    message: `<a target="_blank" style="color: inherit" href="${response.data.success_action.url}">${response.data.success_action.url}</a>`,
-                    caption: response.data.success_action.description,
-                    html: true,
-                    type: 'positive',
-                    timeout: 0,
-                    closeBtn: true,
-                  })
+                  const actionDescription = `<strong>Message: </strong> ${response.data.success_action.description}`
+                  const actionLink = `<a target="_blank" style="color: inherit" href="${response.data.success_action.url}">${response.data.success_action.url}</a>`
+                  this.showPaymentCompentedCard(
+                    `<p class="text-wrap">${actionDescription}<br>${actionLink}</p>`
+                  )
                   break
                 case 'message':
-                  this.$q.notify({
-                    message: response.data.success_action.message,
-                    type: 'positive',
-                    timeout: 0,
-                    closeBtn: true,
-                  })
+                  const message = `<p class="text-wrap"><strong>Message: </strong> ${response.data.success_action.message}</p>`
+                  this.showPaymentCompentedCard(message)
                   break
               }
             }
           }
         }, 2000)
       } catch (err) {
         this.showErrorCard(err, 'Cannot pay LNURL invoice!')
-        dismissPaymentMsg()
       }
     },
     gotoOptionsPage() {
@@ -374,6 +389,18 @@ export default {
       this.error.title = title
       this.error.message = (err.message || err) + '.'
     },
+    showPaymentInProgressCard() {
+      this.currentView = 'paymentStatus'
+      this.paymentDetails.isPayed = false
+      this.paymentDetails.message = 'Processing payment...'
+      this.paymentDetails.details = ''
+    },
+    showPaymentCompentedCard(details = '') {
+      this.currentView = 'paymentStatus'
+      this.paymentDetails.isPayed = true
+      this.paymentDetails.message = 'Payment Successful!'
+      this.paymentDetails.details = details
+    },
   },
   mounted: async function () {
     this.showDialog = true

diff --git a/src/views/content-inject/content.js b/src/views/content-inject/content.js
@@ -32,7 +32,7 @@ try {
   window.addEventListener("message", (e) => {
     const data = e.data;
     if (router.currentRoute.path === '/payment') {
-      router.replace('/foo')
+      router.replace('/loading')
     }
     setTimeout(() => {
       router.replace({

diff --git a/src/views/content-inject/routes.js b/src/views/content-inject/routes.js
@@ -1,17 +1,7 @@
-import Foo from '../../components/Foo.vue'
-import Bar from '../../components/Bar.vue'
 import Loading from '../../components/Loading.vue'
 import PayInvoice from '../../components/PayInvoice.vue'
 
 const routes = [{
-        path: '/foo',
-        component: Foo
-    },
-    {
-        path: '/bar',
-        component: Bar
-    },
-    {
         path: '/payment',
         component: PayInvoice
     },

diff --git a/src/views/options/routes.js b/src/views/options/routes.js