pass msg above qr code as prop to qrplaystore component

threefoldtech · Dec 2, 2024 · 908f758 · 908f758
1 parent 3c327c0
commit 908f758
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
@@ -47,7 +47,7 @@
               </v-col>
               <v-divider class="mx-4" vertical></v-divider>
               <v-col>
-                <QRPlayStore :qr="qrCodeText" />
+                <QRPlayStore :qr="qrCodeText" :msg="qrHeader" />
               </v-col>
             </v-row>
           </v-container>
@@ -94,6 +94,8 @@ const props = defineProps({
   openDepositDialog: Boolean,
   twinId: Number,
 });
+const qrHeader = `<b> OR </b>
+      <p class="mb-3">Use ThreeFold Connect to scan this QRcode:</p>`;
 
 function loadingDots() {
   if (dots.value === "...") {

diff --git a/packages/playground/src/components/qr_play_store.vue b/packages/playground/src/components/qr_play_store.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="d-flex flex-column text-center align-center">
-    <b> OR </b>
-    <p class="mb-3">Use ThreeFold Connect to scan this QRcode:</p>
+    <span v-html="msg"></span>
     <div class="d-flex justify-center py-2">
       <QrcodeGenerator :data="props.qr" />
     </div>
@@ -22,6 +21,7 @@
 <script setup lang="ts">
 const props = defineProps({
   qr: String,
+  msg: String,
 });
 
 const apps = [

diff --git a/packages/playground/src/dashboard/twin_view.vue b/packages/playground/src/dashboard/twin_view.vue
@@ -188,6 +188,7 @@
           <v-col lg="4" md="12" sm="12" class="my-4" v-if="profileManager.profile">
             <QRPlayStore
               :qr="'TFT:' + bridge + '?message=twin_' + profileManager.profile.twinId + '&sender=me&amount=100'"
+              :msg="qrHeader"
             />
           </v-col>
         </v-row>
@@ -204,6 +205,8 @@ import { KycStatus } from "@threefold/grid_client";
 import { generatePublicKey } from "@threefold/rmb_direct_client";
 import { computed, onMounted, ref } from "vue";
 
+import { manual } from "@/utils/manual";
+
 import router from "../router";
 import { useGrid, useProfileManager } from "../stores";
 import type { FarmInterface } from "../types";
@@ -233,7 +236,9 @@ const kycDialogLoading = ref(false);
 const profileManagerController = useProfileManagerController();
 const balance = profileManagerController.balance;
 const insufficientBalance = computed(() => balance.value?.free == undefined || balance.value?.free < 100);
-
+const qrHeader = computed(() => {
+  return `Scan the QR code using <a class="app-link" href="${manual.tf_connect_app}" target="_blank">Threefold Connect</a> to fund your account.`;
+});
 onMounted(async () => {
   const profile = profileManager.profile!;
   if (!grid) {

diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
@@ -387,6 +387,7 @@
             <section class="qr d-flex flex-column align-center">
               <QRPlayStore
                 :qr="'TFT:' + bridge + '?message=twin_' + profileManager.profile.twinId + '&sender=me&amount=100'"
+                :msg="qrHeader"
               />
             </section>
           </v-col>
@@ -454,6 +455,9 @@ const props = defineProps({
     type: Boolean,
   },
 });
+const qrHeader = computed(() => {
+  return `Scan the QR code using <a class="app-link" href="${manual.tf_connect_app}" target="_blank">Threefold Connect</a> to fund your account.`;
+});
 const mnemonicRef = ref();
 const emailRef = ref();