Merge pull request #82 from deverickapollo/migrate-to-settings

Move donation to advanced settings
deverickapollo · Jul 19, 2023 · 405eaf5 · 405eaf5
2 parents a0fcc36 + 4ec4ba8
commit 405eaf5
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 16 deletions.
diff --git a/ui/src/assets/monero-qr-icon.svg b/ui/src/assets/monero-qr-icon.svg
diff --git a/ui/src/components/AdvancedSettingsModal.vue b/ui/src/components/AdvancedSettingsModal.vue
@@ -163,6 +163,22 @@
             If you change the network, restart your Umbrel to make sure any 
             apps connected to your Monero node continue to work properly.
           </small>
+
+          <hr class="advanced-settings-divider" />
+
+          <div class="row">
+            <div class="col-12 col-md-8 col-sm-12 d-flex flex-column align-items-start mb-md-0">
+              <p class="font-weight-bold mb-0">XMR Donation Address</p>
+              <small class=" d-block text-muted mt-1 mb-3">
+                To support our developers, please consider donating to our Monero address. Funds will go towards development of this app and other Monero apps on Umbrel.
+              </small>
+            </div>
+            <div class="col-12 col-md-4 col-sm-12 d-flex justify-content-center justify-content-md-end align-items-center">
+              <div ref="address" class="d-none">{{ address }}</div>
+              <donation></donation>
+            </div>
+          </div>
+
         </div>
 
 
@@ -221,11 +237,14 @@
   </b-form>
 </template>
 
+
 <script>
 import cloneDeep from "lodash.clonedeep";
 
 import { mapState } from "vuex";
 import ToggleSwitch from "./Utility/ToggleSwitch.vue";
+import Donation from "@/components/DonationModal";
+
 
 export default {
   data() {
@@ -261,7 +280,9 @@ export default {
     this.setSettings();
   },
   components: {
-    ToggleSwitch
+    ToggleSwitch,
+    Donation,
+
   },
   methods: {
     submit() {

diff --git a/ui/src/components/DonationModal.vue b/ui/src/components/DonationModal.vue
@@ -1,6 +1,20 @@
-<template v-slot:modal-footer>
-  <div class="col-12 text-center">
-      XMR Donation Address: <code class="donation-link">86PKfN1ExxVe1FH2x7kTeuAtieZRAErbU1gV4qDkrpMKVNcfgAi8Dqz9oXhWCdCEcK6iqgxzdM6GZPCjVejAQ2dtQkWPyXv</code>
+<template v-slot:modal-body>
+  <div class="text-center">
+    <qr-code
+      :value="`xmr:${address}`"
+      :size="120"
+      class="qr-image mx-auto mt-1"
+      showLogo
+      @click="copyAddress"
+      ref="qrCode"
+    ></qr-code>
+    <div ref="address" class="d-none">{{ address }}</div>
+    <div ref="tooltip" class="tooltip fade" role="tooltip">
+      <div class="tooltip-arrow"></div>
+      <div class="tooltip-inner">
+        Copied!
+      </div>
+    </div>
   </div>
 </template>
 
@@ -13,7 +27,31 @@
 </style>
 
 <script>
+  import QrCode from "@/components/Utility/QrCodeMonero";
   export default {
     name: "DonationModal",
+    props: {
+      address: {
+        type: String,
+        default: '86PKfN1ExxVe1FH2x7kTeuAtieZRAErbU1gV4qDkrpMKVNcfgAi8Dqz9oXhWCdCEcK6iqgxzdM6GZPCjVejAQ2dtQkWPyXv',
+      },
+    },
+    methods: {
+      copyAddress() {
+        const address = this.$refs.address.textContent;
+        navigator.clipboard.writeText(address);
+        const tooltip = this.$refs.tooltip;
+        const qrCode = this.$refs.qrCode.$el;
+        tooltip.classList.add("show");
+        tooltip.style.top = `${qrCode.offsetTop - tooltip.offsetHeight}px`;
+        tooltip.style.left = `${qrCode.offsetLeft + qrCode.offsetWidth / 2 - tooltip.offsetWidth / 2}px`;
+        setTimeout(() => {
+          tooltip.classList.remove("show");
+        }, 250);
+      },
+    },
+    components: {
+      QrCode,
+    },
   };
 </script>
diff --git a/ui/src/components/Utility/QrCodeMonero.vue b/ui/src/components/Utility/QrCodeMonero.vue
@@ -0,0 +1,94 @@
+<template>
+    <div
+      class="qr-container"
+      :style="{ width: `${size}px`, height: `${size}px` }"
+      @click="$emit('click')"
+    >
+      <!-- Popup umbrel logo in the middle of QR code -->
+      <transition name="qr-logo-popup" appear>
+        <img
+          v-show="showLogo"
+          src="@/assets/monero-qr-icon.svg"
+          class="qr-logo"
+        />
+      </transition>
+
+      <!-- QR Code element -->
+      <qrcode-vue
+        :value="value"
+        :size="size"
+        :level="level"
+        renderAs="svg"
+        class="d-flex justify-content-center qr-image"
+      ></qrcode-vue>
+    </div>
+  </template>
+
+  <script>
+  import QrcodeVue from "qrcode.vue";
+  
+  export default {
+    props: {
+      size: {
+        type: Number,
+        default: 200
+      },
+      level: {
+        type: String,
+        default: "H"
+      },
+      value: String,
+      showLogo: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {};
+    },
+    computed: {},
+    methods: {},
+    components: {
+      QrcodeVue
+    }
+  };
+  </script>
+
+  <style lang="scss" scoped>
+  // Transition for umbrel logo popping up on QR
+  .qr-logo-popup-enter-active,
+  .qr-logo-popup-leave-active {
+    &.qr-logo {
+      transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+  }
+  
+  .qr-logo-popup-enter {
+    &.qr-logo {
+      transform: translate3d(-50%, -50%, 0) scale(0);
+      opacity: 0;
+    }
+  }
+  
+  .qr-logo-popup-enter-to,
+  .qr-logo-popup-leave,
+  .qr-logo-popup-leave-to {
+    &.qr-logo {
+      transform: translate3d(-50%, -50%, 0) scale(1);
+      opacity: 1;
+    }
+  }
+  
+  .qr-container {
+    position: relative;
+  }
+  .qr-logo {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 25%;
+    height: 25%;
+    transform: translate3d(-50%, -50%, 0) scale(1);
+  }
+  </style>
+
diff --git a/ui/src/views/Monero.vue b/ui/src/views/Monero.vue
@@ -194,16 +194,6 @@
     <b-modal id="advanced-settings-modal" size="lg" centered hide-footer scrollable>
       <advanced-settings-modal :isSettingsDisabled="isRestartPending" @submit="saveSettingsAndRestartMonero" @clickRestoreDefaults="restoreDefaultSettingsAndRestartMonero"></advanced-settings-modal>
     </b-modal>
-
-    <footer class="bg-light text-center">
-      <div class="container">
-        <div class="row">
-          <div class="col-12">
-            <donation></donation>
-          </div>
-        </div>
-      </div>
-    </footer>
   </div>
 
 </template>
@@ -220,7 +210,6 @@ import Blockchain from "@/components/Blockchain";
 import Stat from "@/components/Utility/Stat";
 import ConnectionModal from "@/components/ConnectionModal";
 import AdvancedSettingsModal from "@/components/AdvancedSettingsModal";
-import Donation from "@/components/DonationModal";
 import ChartWrapper from "@/components/ChartWrapper.vue";
 
 export default {
@@ -402,7 +391,6 @@ export default {
     Stat,
     ConnectionModal,
     AdvancedSettingsModal,
-    Donation,
     ChartWrapper
   }
 };