From 6460f11a0509f76b1d5b2b07bce341aec700c50e Mon Sep 17 00:00:00 2001
From: Danielle Smith <danielle.smith@launchbadge.com>
Date: Thu, 21 Oct 2021 19:23:50 -0700
Subject: [PATCH 1/2] Moonpay iframe integration; in progress.

Signed-off-by: Danielle Smith <danielle.smith@launchbadge.com>
---
 src/components/interface/BuyAssetsModal.vue | 38 +++++++++++
 src/pages/interface/Home.vue                | 76 +++++++++++++--------
 vite.config.js                              |  3 +-
 3 files changed, 88 insertions(+), 29 deletions(-)
 create mode 100644 src/components/interface/BuyAssetsModal.vue

diff --git a/src/components/interface/BuyAssetsModal.vue b/src/components/interface/BuyAssetsModal.vue
new file mode 100644
index 00000000..38e57597
--- /dev/null
+++ b/src/components/interface/BuyAssetsModal.vue
@@ -0,0 +1,38 @@
+<template>
+  <Modal
+    title="Buy Assets"
+    :is-visible="open"
+    @close="$emit('close')"
+  >
+    <div class="m-4 mt-8 h-80">
+      <iframe
+        allow="accelerometer; autoplay; camera; gyroscope; payment"
+        frameborder="0"
+        height="100%"
+        src="https://buy-staging.moonpay.io?apiKey=pk_test_123"
+        width="100%"
+        class="rounded"
+      />
+    </div>
+  </Modal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import Modal from "./Modal.vue";
+
+export default defineComponent({
+    name: "BuyAssetsModal",
+    components: {
+        Modal
+    },
+    props: {
+        open: { type: Boolean, default: false }
+    },
+    emits: [ "close" ],
+    setup(){
+        console.log("from buy assets");
+    }
+});
+</script>
\ No newline at end of file
diff --git a/src/pages/interface/Home.vue b/src/pages/interface/Home.vue
index 58b16339..1784cf47 100644
--- a/src/pages/interface/Home.vue
+++ b/src/pages/interface/Home.vue
@@ -2,9 +2,7 @@
   <div class="md:flex md:justify-between">
     <div>
       <div class="flex">
-        <div
-          class="mr-2 text-3xl leading-9 text-carbon dark:text-white"
-        >
+        <div class="mr-2 text-3xl leading-9 text-carbon dark:text-white">
           {{ $t("App.heyThere") }}
         </div>
 
@@ -25,35 +23,35 @@
       <TotalBalance />
     </div>
 
-    <div class="flex justify-center py-12">
-      <div class="w-11" />
-      <div>
-        <router-link
-          data-cy-send
-          :to="{ name: 'send' }"
-        >
-          <Image
-            class="w-20 h-20"
-            :light="sendAssetLight"
-            :dark="sendAssetDark"
-            alt="paper airplane"
-          />
-
-          <div
-            class="font-medium leading-5 text-center text-andrea-blue"
-          >
-            {{ $t("InterfaceHome.button.send") }}
-          </div>
-        </router-link>
+    <div class="flex justify-center py-12 font-medium leading-5 text-center text-andrea-blue">
+      <div class="mr-4 cursor-pointer">
+        <Image
+          class="w-20 h-20"
+          :light="addAssetLight"
+          :dark="addAssetDark"
+          alt="buy assets"
+          @click="openBuyAssetsModal"
+        />
+        <div>{{ $t("InterfaceHome.button.buy") }}</div>
       </div>
+      <router-link
+        data-cy-send
+        :to="{ name: 'send' }"
+      >
+        <Image
+          class="w-20 h-20"
+          :light="sendAssetLight"
+          :dark="sendAssetDark"
+          alt="paper airplane"
+        />
+        <div>{{ $t("InterfaceHome.button.send") }}</div>
+      </router-link>
     </div>
   </div>
 
   <div class="border-t border-cerebral-grey dark:border-midnight-express" />
 
-  <div
-    class="grid md:grid-flow-col md:gap-x-12 md:auto-cols-fr mt-7 dark:bg-ruined-smores"
-  >
+  <div class="grid md:grid-flow-col md:gap-x-12 md:auto-cols-fr mt-7 dark:bg-ruined-smores">
     <Assets :limit-tokens="5" />
 
     <Transactions
@@ -61,10 +59,15 @@
       page-size="5"
     />
   </div>
+
+  <BuyAssetsModal
+    :open="state.showBuyAssetsModal"
+    @close="closeBuyAssetsModal"
+  />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted } from "vue";
+import { computed, defineComponent, onMounted, reactive } from "vue";
 
 import { useStore } from "../../store";
 import addAssetLight from "../../assets/img_add.svg";
@@ -76,6 +79,7 @@ import Assets from "../../components/interface/Assets.vue";
 import Transactions from "../../components/interface/Transactions.vue";
 import Identicon from "../../components/interface/Identicon.vue";
 import TotalBalance from "../../components/interface/TotalBalance.vue";
+import BuyAssetsModal from "../../components/interface/BuyAssetsModal.vue";
 
 export default defineComponent({
   name: "Home",
@@ -85,23 +89,39 @@ export default defineComponent({
     Image,
     Assets,
     Transactions,
+    BuyAssetsModal
   },
   setup() {
     const store = useStore();
     const accountId = computed(() => store.accountId);
     const publicKey = computed(() => store.publicKey);
-    
+
+    const state = reactive({
+      showBuyAssetsModal: false
+    });
+
     onMounted(() => {
       void store.requestHbarPrice();
     });
 
+    function openBuyAssetsModal(): void {
+      state.showBuyAssetsModal = true;
+    }
+
+    function closeBuyAssetsModal(): void {
+      state.showBuyAssetsModal = false;
+    }
+
     return {
+      state,
       accountId,
       publicKey,
       addAssetLight,
       sendAssetLight,
       addAssetDark,
       sendAssetDark,
+      openBuyAssetsModal,
+      closeBuyAssetsModal
     };
   },
 });
diff --git a/vite.config.js b/vite.config.js
index a062a44a..711cef0c 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -34,9 +34,10 @@ export default async function ({ mode }) {
                 "grpc-web.previewnet.myhbarwallet.com",
                 "grpc-web.myhbarwallet.com",
                 "api.coingecko.com",
-                "v2.api.testnet.kabuto.sh"
+                "v2.api.testnet.kabuto.sh",
             ].join(" "),
         "font-src 'self' data:",
+        "frame-src 'self' https://buy-staging.moonpay.io https://buy-staging.moonpay.com 'unsafe-eval' 'unsafe-inline'",
         isProduction ? "style-src 'self'" : "style-src 'self' 'unsafe-inline'",
     ];
 

From 6b4df6b468d95ad7abddc077b429bc7de47b2e2b Mon Sep 17 00:00:00 2001
From: Danielle Smith <danielle.smith@launchbadge.com>
Date: Fri, 22 Oct 2021 12:25:04 -0700
Subject: [PATCH 2/2] Near completion. TODO: Contact Moonpay to sort out Hbar
 issues, get env variables working again in vite.config

Signed-off-by: Danielle Smith <danielle.smith@launchbadge.com>
---
 package.json                                |  3 ++-
 pnpm-lock.yaml                              |  2 ++
 src/components/interface/BuyAssetsModal.vue | 14 +++++++++++---
 src/pages/interface/Home.vue                |  2 +-
 vite.config.js                              |  8 ++++++--
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index c86dfe98..8d76af54 100644
--- a/package.json
+++ b/package.json
@@ -126,6 +126,7 @@
     "vite-plugin-html": "^2.1.0",
     "vite-plugin-pwa": "^0.8.2",
     "vue-tsc": "^0.2.3",
-    "workbox-window": "^6.2.4"
+    "workbox-window": "^6.2.4",
+    "dotenv": "^10.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cad93393..da9de5ed 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,7 @@ specifiers:
   cross-env: ^7.0.3
   cypress: ^8.3.1
   cypress-file-upload: ^5.0.8
+  dotenv: ^10.0.0
   electron: ^13.2.3
   electron-builder: ^22.13.1
   electron-window-state: ^5.0.3
@@ -98,6 +99,7 @@ devDependencies:
   cross-env: 7.0.3
   cypress: 8.3.1
   cypress-file-upload: 5.0.8_cypress@8.3.1
+  dotenv: 10.0.0
   electron: 13.2.3
   electron-builder: 22.13.1
   eslint: 7.32.0
diff --git a/src/components/interface/BuyAssetsModal.vue b/src/components/interface/BuyAssetsModal.vue
index 38e57597..1dd3e8c0 100644
--- a/src/components/interface/BuyAssetsModal.vue
+++ b/src/components/interface/BuyAssetsModal.vue
@@ -4,12 +4,12 @@
     :is-visible="open"
     @close="$emit('close')"
   >
-    <div class="m-4 mt-8 h-80">
+    <div class="m-4 mt-8 h-[450px] overflow-auto">
       <iframe
         allow="accelerometer; autoplay; camera; gyroscope; payment"
         frameborder="0"
         height="100%"
-        src="https://buy-staging.moonpay.io?apiKey=pk_test_123"
+        :src="moonpayWidgetURL"
         width="100%"
         class="rounded"
       />
@@ -22,6 +22,9 @@ import { defineComponent } from "vue";
 
 import Modal from "./Modal.vue";
 
+//TODO: Get env variable working again in vite.config
+declare const __MOONPAY_AUTH__: string;
+
 export default defineComponent({
     name: "BuyAssetsModal",
     components: {
@@ -32,7 +35,12 @@ export default defineComponent({
     },
     emits: [ "close" ],
     setup(){
-        console.log("from buy assets");
+        //const moonpayWidgetURL = `https://buy-staging.moonpay.com?apiKey=pk_test_${__MOONPAY_AUTH__}`;
+        const moonpayWidgetURL = `https://buy-staging.moonpay.com?apiKey=pk_test_ypQ0mhShRarhXwAbGvdLfxAL89AtfQ`;
+
+        return {
+            moonpayWidgetURL
+        }
     }
 });
 </script>
\ No newline at end of file
diff --git a/src/pages/interface/Home.vue b/src/pages/interface/Home.vue
index 1784cf47..1d8d0f38 100644
--- a/src/pages/interface/Home.vue
+++ b/src/pages/interface/Home.vue
@@ -100,7 +100,7 @@ export default defineComponent({
       showBuyAssetsModal: false
     });
 
-    onMounted(() => {
+    onMounted(async () => {
       void store.requestHbarPrice();
     });
 
diff --git a/vite.config.js b/vite.config.js
index 711cef0c..8a20745d 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,13 +8,14 @@ import vueI18n from "@intlify/vite-plugin-vue-i18n";
 import { VitePWA } from "vite-plugin-pwa";
 import { getLastCommit } from "git-last-commit";
 import { defineConfig } from "vite";
+import dotenv from "dotenv"
 
 import packageJson from "./package.json";
 
 export default async function ({ mode }) {
+    dotenv.config({path: `./env.${mode}`});
     const isProduction = mode === "production";
     const isElectron = process.env.IS_ELECTRON === "true";
-
     // Output directories
     const webOutDir = "dist/web";
     const electronOutDir = "dist/electron";
@@ -35,9 +36,10 @@ export default async function ({ mode }) {
                 "grpc-web.myhbarwallet.com",
                 "api.coingecko.com",
                 "v2.api.testnet.kabuto.sh",
+                "https://api.moonpay.com"
             ].join(" "),
         "font-src 'self' data:",
-        "frame-src 'self' https://buy-staging.moonpay.io https://buy-staging.moonpay.com 'unsafe-eval' 'unsafe-inline'",
+        "frame-src 'self' https://buy.moonpay.io https://buy-staging.moonpay.io https://buy-staging.moonpay.com 'unsafe-eval' 'unsafe-inline'",
         isProduction ? "style-src 'self'" : "style-src 'self' 'unsafe-inline'",
     ];
 
@@ -49,6 +51,7 @@ export default async function ({ mode }) {
                     injectData: {
                         contentSecurityPolicy: contentSecurityPolicy.join("; "),
                     },
+                    process: "process"
                 },
             }),
             vue(),
@@ -73,6 +76,7 @@ export default async function ({ mode }) {
             __APP_LAST_COMMIT_SHORT_HASH__: JSON.stringify(
                 lastCommit.shortHash
             ),
+            __MOONPAY_AUTH__: JSON.stringify(process.env.VUE_APP_MOONPAY_AUTH)
         },
         build: {
             outDir: isElectron ? electronOutDir : webOutDir,