Draft: Moonpay

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"
   }
 }

src/components/interface/BuyAssetsModal.vue

@@ -0,0 +1,46 @@
+<template>
+  <Modal
+    title="Buy Assets"
+    :is-visible="open"
+    @close="$emit('close')"
+  >
+    <div class="m-4 mt-8 h-[450px] overflow-auto">
+      <iframe
+        allow="accelerometer; autoplay; camera; gyroscope; payment"
+        frameborder="0"
+        height="100%"
+        :src="moonpayWidgetURL"
+        width="100%"
+        class="rounded"
+      />
+    </div>
+  </Modal>
+</template>
+
+<script lang="ts">
+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: {
+        Modal
+    },
+    props: {
+        open: { type: Boolean, default: false }
+    },
+    emits: [ "close" ],
+    setup(){
+        //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>

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,46 +23,51 @@
       <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
       class="mt-4 sm:mt-0"
       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);
-
-    onMounted(() => {
+
+    const state = reactive({
+      showBuyAssetsModal: false
+    });
+
+    onMounted(async () => {
       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
     };
   },
 });

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";
@@ -34,9 +35,11 @@ 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",
+                "https://api.moonpay.com"
             ].join(" "),
         "font-src 'self' data:",
+        "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'",
     ];
 
@@ -48,6 +51,7 @@ export default async function ({ mode }) {
                     injectData: {
                         contentSecurityPolicy: contentSecurityPolicy.join("; "),
                     },
+                    process: "process"
                 },
             }),
             vue(),
@@ -72,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,