#6 extract config service

src/components/PayInvoice.vue

@@ -1,34 +1,7 @@
 <template>
   <q-dialog ref="dialog" v-model="showDialog" @hide="closeDialog">
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-      <div v-if="showInvoiceDetails">
-        <h6 class="q-my-none">{{ parse.invoice.fsat }} sat</h6>
-        <q-separator class="q-my-sm"></q-separator>
-        <p class="text-wrap">
-          <strong>Requested By:</strong> {{ requestedBy }}<br />
-          <strong>Description:</strong> {{ parse.invoice.description }}<br />
-          <strong>Expire date:</strong> {{ parse.invoice.expireDate }}<br />
-          <strong>Hash:</strong> {{ parse.invoice.hash }}
-        </p>
-        <q-expansion-item group="extras" icon="crop_free" label="QR Code">
-          <qrcode :value="parse.data.request" class="rounded-borders"></qrcode>
-        </q-expansion-item>
-
-        <div v-if="!hasAccount" class="row q-mt-lg">
-          <q-btn unelevated color="yellow" text-color="black" @click="gotoOptionsPage"
-            >No Account Found!</q-btn
-          >
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
-        </div>
-        <div v-else-if="canPay" class="row q-mt-lg">
-          <q-btn unelevated color="deep-purple" @click="payInvoice">Pay</q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
-        </div>
-        <div v-else class="row q-mt-lg">
-          <q-btn unelevated disabled color="yellow" text-color="black">Not enough funds!</q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
-        </div>
-      </div>
+      <div v-if="showInvoiceDetails"></div>
       <div v-else-if="showLnurlPayDetais">
         <p v-if="parse.lnurlpay.fixed" class="q-my-none text-h6">
           <b>{{ parse.lnurlpay.domain }}</b> is requesting
@@ -229,6 +202,7 @@ import bolt11 from 'bolt11'
 import _ from 'lodash'
 import lnbitsApi from '../services/lnbits-api.svc'
 import uiUtils from '../utils/ui-utils'
+import configSvc from '../services/config.svc'
 
 export default {
   name: 'pay-invoice',
@@ -590,20 +564,11 @@ export default {
       this.parse.data.request = this.$route.query.paymentRequest || ''
       this.requestedBy = this.$route.query.requestedBy || ''
 
-      const result = await this.$browser.storage.sync.get({ serverUrl: '' })
-      this.serverUrl = result.serverUrl
+      this.serverUrl = await configSvc.getServerUrl()
+      const isConfigValid = await configSvc.isConfigValid()
 
-      const result1 = await this.$browser.storage.sync.get({
-        user: '',
-      })
-      const result2 = await this.$browser.storage.sync.get({
-        walletId: '',
-      })
-      const walletId = result2.walletId
-      const user = result1.user
-      if (this.serverUrl && user && user.id && user.wallets && user.wallets.length) {
-        const activeWallet = user.wallets.find((w) => w.id === walletId)
-        this.activeWallet = activeWallet || user.wallets[0]
+      if (isConfigValid) {
+        this.activeWallet = await configSvc.getActiveWallet()
         this.decodeRequest()
         this.fetchBalance()
       } else {

src/services/config.svc.js

@@ -0,0 +1,78 @@
+async function getServerUrl() {
+    const result = await this.$browser.storage.sync.get({
+        serverUrl: ''
+    })
+    return result.serverUrl
+}
+
+async function setServerUrl(value) {
+    return this.$browser.storage.sync.set({
+        serverUrl: value
+    });
+}
+
+async function getUser() {
+    const result = await this.$browser.storage.sync.get({
+        user: '',
+    });
+    return result.user;
+}
+
+async function setUser(value) {
+    return this.$browser.storage.sync.set({
+        user: value
+    });
+}
+
+async function getUserId() {
+    const result = await this.$browser.storage.sync.get({
+        userId: ''
+    })
+    return result.userId
+}
+
+async function setUserId(value) {
+    return this.$browser.storage.sync.set({
+        userId: value
+    });
+}
+
+async function getWalletId() {
+    const result = await this.$browser.storage.sync.get({
+        walletId: ''
+    })
+    return result.walletId
+}
+
+async function setWalletId(value) {
+    return this.$browser.storage.sync.set({
+        walletId: value
+    });
+}
+
+async function getActiveWallet() {
+    const user = await getUser()
+    const walletId = await getWalletId()
+    const activeWallet = user.wallets.find((w) => w.id === walletId)
+    return activeWallet || user.wallets[0];
+}
+
+async function isConfigValid() {
+    const serverUrl = await getServerUrl()
+    const user = await getUser()
+
+    return serverUrl && user && user.id && user.wallets && user.wallets.length
+}
+
+export default {
+    getServerUrl,
+    setServerUrl,
+    getUser,
+    setUser,
+    getUserId,
+    setUserId,
+    getWalletId,
+    setWalletId,
+    getActiveWallet,
+    isConfigValid,
+}

src/views/app/app.js

@@ -2,6 +2,7 @@ import browser from "webextension-polyfill";
 import Vue from 'vue'
 import VueRouter from 'vuerouter'
 import Quasar from 'quasar'
+import configSvc from '../../services/config.svc'
 import App from '../../components/App.vue'
 import routes from './routes'
 
@@ -15,18 +16,9 @@ async function init(elementId = 'app') {
     routes
   })
 
-  // TODO: extract
-  const serverResult = await browser.storage.sync.get({
-    serverUrl: ''
-  })
-  const serverUrl = serverResult.serverUrl
-
-  const result = await browser.storage.sync.get({
-    user: ''
-  })
-  const user = result.user
+  const isConfigValid = await configSvc.isConfigValid()
 
-  if (serverUrl && user && user.id && user.wallets && user.wallets.length) {
+  if (isConfigValid) {
     router.replace({
       path: 'lnbits',
     })