Fix Vue error in MoonpayModal

Calling onBeforeUnmount is not allowed outside the setup() function, and because onMount has an async callback, that callback is outside the setup() function.
nimiq · Jul 5, 2023 · e1797f8 · e1797f8
1 parent d671f4d
commit e1797f8
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/src/components/modals/MoonpayModal.vue b/src/components/modals/MoonpayModal.vue
@@ -101,10 +101,12 @@ export default defineComponent({
 
         const widgetReady = ref(false);
 
+        let widget: any;
+
         onMounted(async () => {
             await loadScript('MoonPayWebSdk', 'https://static.moonpay.com/web-sdk/v1/moonpay-web-sdk.min.js');
 
-            const widget = window.MoonPayWebSdk.init({
+            widget = window.MoonPayWebSdk.init({
                 debug: config.environment !== ENV_MAIN,
                 flow: props.flow,
                 environment: config.environment === ENV_MAIN ? 'production' : 'sandbox',
@@ -156,10 +158,10 @@ export default defineComponent({
 
             widget.show();
             widgetReady.value = true;
-
-            onBeforeUnmount(() => widget.close());
         });
 
+        onBeforeUnmount(() => widget && widget.close());
+
         async function sendBitcoin(properties: InitiateDepositProperties) {
             try {
                 const value = parseInt(properties.cryptoCurrencyAmountSmallestDenomination, 10);