Refactor DCA client registration form: Update wallet selection to use walletOptions computed property for better data handling. Change element ID from 'dcaClient' to 'vue' for consistency. Improve error handling and data validation in chart loading and registration processes.

static/js/index.js

@@ -1,5 +1,5 @@
 window.app = Vue.createApp({
-  el: '#dcaClient',
+  el: '#vue',
   mixins: [windowMixin],
   delimiters: ['${', '}'],
   data: function () {
@@ -88,7 +88,7 @@ window.app = Vue.createApp({
           this.showRegistrationDialog = true
           // Pre-fill username and default wallet if available
           this.registrationForm.username = this.g.user.username || ''
-          this.registrationForm.selectedWallet = this.g.user.wallets[0] || null
+          this.registrationForm.selectedWallet = this.g.user.wallets[0]?.id || null
         }
 
         return data
@@ -108,10 +108,16 @@ window.app = Vue.createApp({
           username: this.registrationForm.username || this.g.user.username || `user_${this.g.user.id.substring(0, 8)}`
         }
 
+        // Find the selected wallet object to get the adminkey
+        const selectedWallet = this.g.user.wallets.find(w => w.id === this.registrationForm.selectedWallet)
+        if (!selectedWallet) {
+          throw new Error('Selected wallet not found')
+        }
+
         const { data } = await LNbits.api.request(
           'POST',
           '/satmachineclient/api/v1/register',
-          this.registrationForm.selectedWallet.adminkey,
+          selectedWallet.adminkey,
           registrationData
         )
 
@@ -781,6 +787,14 @@ window.app = Vue.createApp({
   computed: {
     hasData() {
       return this.dashboardData && !this.loading && this.isRegistered
+    },
+
+    walletOptions() {
+      if (!this.g.user?.wallets) return []
+      return this.g.user.wallets.map(wallet => ({
+        label: `${wallet.name} (${Math.round(wallet.balance_msat / 1000)} sats)`,
+        value: wallet.id
+      }))
     }
   },
 

templates/satmachineclient/index.html

@@ -7,7 +7,7 @@
 <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
 <script src="{{ static_url_for('satmachineclient/static', path='js/index.js') }}"></script>
 {% endblock %} {% block page %}
-<div class="row q-col-gutter-md" id="dcaClient">
+<div class="row q-col-gutter-md" id="vue">
   <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
     
     <!-- Loading State -->
@@ -542,49 +542,32 @@
           label="Username (Optional)"
           placeholder="Enter a friendly name"
           hint="How you'd like to be identified in the system"
-        />
+        ></q-input>
 
         <q-select
           filled
           dense
+          emit-value
           v-model="registrationForm.selectedWallet"
-          :options="g.user.wallets"
+          :options="walletOptions"
-          option-label="name"
           label="DCA Wallet *"
           hint="Choose which wallet will receive your Bitcoin DCA purchases"
-        >
+        ></q-select>
-          <template v-slot:option="scope">
-            <q-item v-bind="scope.itemProps">
-              <q-item-section>
-                <q-item-label>
-                  ${scope.opt.name} (ID: ${scope.opt.id.substring(0, 8)}... • ${Math.round(scope.opt.balance_msat / 1000)} sats)
-                </q-item-label>
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
 
         <q-select
           filled
           dense
+          emit-value
           v-model="registrationForm.dca_mode"
           :options="[
-            { label: 'Flow Mode (Recommended)', value: 'flow', description: 'Proportional distribution based on your balance' },
+            { label: 'Flow Mode (Recommended)', value: 'flow' },
-            { label: 'Fixed Mode', value: 'fixed', description: 'Set daily purchase limits' }
+            { label: 'Fixed Mode', value: 'fixed' }
           ]"
           option-label="label"
           option-value="value"
           label="DCA Strategy *"
           hint="Choose how your Bitcoin purchases will be distributed"
-        >
+        ></q-select>
-          <template v-slot:option="scope">
-            <q-item v-bind="scope.itemProps">
-              <q-item-section>
-                <q-item-label>${scope.opt.label} - ${scope.opt.description}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
 
         <q-input
           v-if="registrationForm.dca_mode === 'fixed'"
@@ -598,7 +581,7 @@
           :rules="[
             val => registrationForm.dca_mode !== 'fixed' || (val && val > 0) || 'Daily limit is required for fixed mode'
           ]"
-        />
+        ></q-input>
 
         <q-banner class="bg-blue-1 text-blue-9 q-mt-md">
           <template v-slot:avatar>
@@ -619,8 +602,7 @@
             class="full-width"
             size="lg"
           >
-            <q-icon name="rocket_launch" class="q-mr-sm" />
+            🚀 Start My DCA Journey
-            Start My DCA Journey
           </q-btn>
         </div>
       </q-form>