feat: add dynamic module loading and translations

config.json

@@ -2,7 +2,8 @@
   "name": "Onchain Wallet",
   "short_description": "Onchain watch only wallets",
   "tile": "/watchonly/static/bitcoin-wallet.png",
-  "min_lnbits_version": "1.4.0",
+  "version": "0.4.0",
+  "min_lnbits_version": "1.5.0",
   "contributors": [
     {
       "name": "motorina0",

pyproject.toml

@@ -14,22 +14,13 @@ dev = [
   "pre-commit>=3.2.2,<4",
   "pytest>=7.3.2,<8",
   "pytest-asyncio>=0.21.0,<0.22",
+  "pytest-md",
   "ruff>=0.3.2,<0.4",
 ]
 
 [tool.poetry]
 package-mode = false
 
-
-[tool.poetry.group.dev.dependencies]
-black = "^24.3.0"
-pytest-asyncio = "^0.21.0"
-pytest = "^7.3.2"
-mypy = "^1.5.1"
-pre-commit = "^3.2.2"
-ruff = "^0.3.2"
-
-
 [tool.mypy]
 exclude = "(nostr/*)"
 [[tool.mypy.overrides]]

static/components/address-list.js

@@ -1,7 +1,6 @@
 window.app.component('address-list', {
   name: 'address-list',
   template: '#address-list',
-  delimiters: ['${', '}'],
   props: [
     'addresses',
     'accounts',
@@ -23,41 +22,6 @@ window.app.component('address-list', {
       filterValues: [],
 
       addressesTable: {
-        columns: [
-          {
-            name: 'expand',
-            align: 'left',
-            label: ''
-          },
-          {
-            name: 'address',
-            align: 'left',
-            label: 'Address',
-            field: 'address',
-            sortable: true
-          },
-          {
-            name: 'amount',
-            align: 'left',
-            label: 'Amount',
-            field: 'amount',
-            sortable: true
-          },
-          {
-            name: 'note',
-            align: 'left',
-            label: 'Note',
-            field: 'note',
-            sortable: true
-          },
-          {
-            name: 'wallet',
-            align: 'left',
-            label: 'Account',
-            field: 'wallet',
-            sortable: true
-          }
-        ],
         pagination: {
           rowsPerPage: 0,
           sortBy: 'amount',
@@ -68,6 +32,46 @@ window.app.component('address-list', {
     }
   },
 
+  computed: {
+    addressesTableColumns() {
+      return [
+        {
+          name: 'expand',
+          align: 'left',
+          label: ''
+        },
+        {
+          name: 'address',
+          align: 'left',
+          label: this.$t('watchonly.address_label'),
+          field: 'address',
+          sortable: true
+        },
+        {
+          name: 'amount',
+          align: 'left',
+          label: this.$t('watchonly.amount'),
+          field: 'amount',
+          sortable: true
+        },
+        {
+          name: 'note',
+          align: 'left',
+          label: this.$t('watchonly.note'),
+          field: 'note',
+          sortable: true
+        },
+        {
+          name: 'wallet',
+          align: 'left',
+          label: this.$t('watchonly.account'),
+          field: 'wallet',
+          sortable: true
+        }
+      ]
+    }
+  },
+
   methods: {
     satBtc(val, showUnit = true) {
       return satOrBtc(val, showUnit, this.satsDenominated)

static/components/fee-rate.js

@@ -1,7 +1,6 @@
 window.app.component('fee-rate', {
   name: 'fee-rate',
   template: '#fee-rate',
-  delimiters: ['${', '}'],
 
   props: ['rate', 'fee-value', 'sats-denominated', 'mempool-endpoint'],
 

static/components/history.js

@@ -1,78 +1,84 @@
 window.app.component('history', {
   name: 'history',
   template: '#history',
-  delimiters: ['${', '}'],
 
   props: ['history', 'mempool-endpoint', 'sats-denominated', 'filter'],
   data: function () {
     return {
       historyTable: {
-        columns: [
-          {
-            name: 'expand',
-            align: 'left',
-            label: ''
-          },
-          {
-            name: 'status',
-            align: 'left',
-            label: 'Status'
-          },
-          {
-            name: 'amount',
-            align: 'left',
-            label: 'Amount',
-            field: 'amount',
-            sortable: true
-          },
-          {
-            name: 'address',
-            align: 'left',
-            label: 'Address',
-            field: 'address',
-            sortable: true
-          },
-          {
-            name: 'date',
-            align: 'left',
-            label: 'Date',
-            field: 'date',
-            sortable: true
-          },
-          {
-            name: 'txId',
-            field: 'txId'
-          }
-        ],
-        exportColums: [
-          {
-            label: 'Action',
-            field: 'action'
-          },
-          {
-            label: 'Date&Time',
-            field: 'date'
-          },
-          {
-            label: 'Amount',
-            field: 'amount'
-          },
-          {
-            label: 'Fee',
-            field: 'fee'
-          },
-          {
-            label: 'Transaction Id',
-            field: 'txId'
-          }
-        ],
         pagination: {
           rowsPerPage: 0
         }
       }
     }
   },
 
+  computed: {
+    historyTableColumns() {
+      return [
+        {
+          name: 'expand',
+          align: 'left',
+          label: ''
+        },
+        {
+          name: 'status',
+          align: 'left',
+          label: this.$t('watchonly.status')
+        },
+        {
+          name: 'amount',
+          align: 'left',
+          label: this.$t('watchonly.amount'),
+          field: 'amount',
+          sortable: true
+        },
+        {
+          name: 'address',
+          align: 'left',
+          label: this.$t('watchonly.address_label'),
+          field: 'address',
+          sortable: true
+        },
+        {
+          name: 'date',
+          align: 'left',
+          label: this.$t('watchonly.date'),
+          field: 'date',
+          sortable: true
+        },
+        {
+          name: 'txId',
+          field: 'txId'
+        }
+      ]
+    },
+    historyExportColumns() {
+      return [
+        {
+          label: this.$t('watchonly.action'),
+          field: 'action'
+        },
+        {
+          label: this.$t('watchonly.date_time'),
+          field: 'date'
+        },
+        {
+          label: this.$t('watchonly.amount'),
+          field: 'amount'
+        },
+        {
+          label: this.$t('watchonly.fee'),
+          field: 'fee'
+        },
+        {
+          label: this.$t('watchonly.transaction_id'),
+          field: 'txId'
+        }
+      ]
+    }
+  },
+
   methods: {
     satBtc(val, showUnit = true) {
       return satOrBtc(val, showUnit, this.satsDenominated)
@@ -86,7 +92,7 @@ window.app.component('history', {
         action: a.sent ? 'Sent' : 'Received'
       }))
       LNbits.utils.exportCSV(
-        this.historyTable.exportColums,
+        this.historyExportColumns,
         history,
         'address-history'
       )

static/components/my-checkbox.js

@@ -1,7 +1,6 @@
 window.app.component('my-checkbox', {
   name: 'my-checkbox',
   template: '#my-checkbox',
-  delimiters: ['${', '}'],
   data() {
     return {checked: false, title: 'Check me'}
   },

static/components/payment.js

@@ -1,7 +1,6 @@
 window.app.component('payment', {
   name: 'payment',
   template: '#payment',
-  delimiters: ['${', '}'],
 
   props: [
     'accounts',

static/components/seed-input.js

@@ -1,7 +1,6 @@
 window.app.component('seed-input', {
   name: 'seed-input',
   template: '#seed-input',
-  delimiters: ['${', '}'],
 
   computed: {
     actualPosition: function () {

static/components/send-to.js

@@ -1,7 +1,6 @@
 window.app.component('send-to', {
   name: 'send-to',
   template: '#send-to',
-  delimiters: ['${', '}'],
 
   props: ['data', 'tx-size', 'selected-amount', 'fee-rate', 'sats-denominated'],
 

static/components/serial-port-config.js

@@ -2,7 +2,6 @@ window.app.component('serial-port-config', {
   name: 'serial-port-config',
   props: ['config'],
   template: '#serial-port-config',
-  delimiters: ['${', '}'],
   data() {
     return {}
   },

static/components/serial-signer.js

@@ -1,7 +1,6 @@
 window.app.component('serial-signer', {
   name: 'serial-signer',
   template: '#serial-signer',
-  delimiters: ['${', '}'],
 
   props: ['sats-denominated', 'network'],
   data: function () {

static/components/trezor-signer.js

@@ -2,7 +2,6 @@ window.app.component('trezor-signer', {
   name: 'trezor-signer',
   template: '#trezor-signer',
   props: ['sats-denominated', 'network'],
-  delimiters: ['${', '}'],
   data: function () {
     return {
       features: null,