feat: Reuse centralized Toast Notifs component - MEED-2627 - Meeds-io/MIPs#99

wallet-webapps/src/main/webapp/vue-app/wallet-admin/walletAdmin.js

@@ -26,10 +26,10 @@ const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale
 
 export function init() {
   exoi18n.loadLanguageAsync(lang, url).then(i18n => {
-    new Vue({
+    Vue.createApp({
       render: (h) => h(WalletAdminApp),
       i18n,
       vuetify,
-    }).$mount('#WalletAdminApp');
+    }, '#WalletAdminApp', 'Wallet Administration');
   });
 }

wallet-webapps/src/main/webapp/vue-app/wallet-app/walletAPI.js

@@ -32,11 +32,11 @@ export function initAPI() {
 
         window.LocalWeb3 = LocalWeb3;
 
-        new Vue({
+        Vue.createApp({
           render: (h) => h(WalletAPIApp),
           i18n,
           vuetify,
-        }).$mount('#WalletAPIApp');
+        }, '#WalletAPIApp', 'Wallet API');
       });
     });
   }

wallet-webapps/src/main/webapp/vue-app/wallet-common/components/WalletNotificationAlert.vue

@@ -14,34 +14,9 @@ You should have received a copy of the GNU Lesser General Public License
 along with this program; if not, write to the Free Software Foundation,
 Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
-<template>
-  <v-snackbar
-    v-model="snackbar"
-    :left="!$vuetify.rtl"
-    :right="$vuetify.rtl"
-    color="transparent"
-    elevation="0"
-    app>
-    <exo-notification-alert
-      :alert="alert"
-      @dismissed="clear">
-      <template #actions v-if="showTransactionLink">
-        <a
-          :href="transactionHashLink"
-          :title="$t('exoplatform.wallet.message.transactionExplorerLink')"
-          rel="external nofollow noreferrer noopener"
-          class="d-block"
-          target="_blank">
-          {{ transactionLinkLabel }}
-        </a>
-      </template>
-    </exo-notification-alert>
-  </v-snackbar>
-</template>
 <script>
 export default {
   data: () => ({
-    snackbar: false,
     alert: null,
   }),
   computed: {
@@ -55,18 +30,27 @@ export default {
       return this.alert?.transactionHash;
     }
   },
-  watch: {
-    alert() {
-      this.snackbar = !!this.alert;
-    }
-  },
   created() {
-    this.$root.$on('wallet-notification-alert', alert => this.alert = alert);
-  },
-  methods: {
-    clear() {
-      this.alert = null;
-    },
+    this.$root.$on('wallet-notification-alert', alert => {
+      this.alert = alert;
+      this.$nextTick().then(() => {
+        if (this.alert) {
+          const detail = {
+            alertMessage: this.alert.message,
+            alertType: this.alert.type,
+          };
+          if (this.transactionHashLink) {
+            detail.alertLink = this.transactionHashLink;
+            detail.alertLinkText = this.transactionLinkLabel;
+            detail.alertLinkTarget = '_blank';
+            detail.alertLinkTooltip = this.$t('exoplatform.wallet.message.transactionExplorerLink');
+          }
+          document.dispatchEvent(new CustomEvent('alert-message-html', {detail}));
+        } else {
+          document.dispatchEvent(new CustomEvent('close-alert-message'));
+        }
+      });
+    });
   },
 };
 </script>

wallet-webapps/src/main/webapp/vue-app/wallet-common/wallet-overview/main.js

@@ -33,18 +33,15 @@ const lang = (eXo && eXo.env && eXo.env.portal && eXo.env.portal.language) || 'e
 const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.addon.Wallet-${lang}.json`;
 
 const appId = 'WalletOverview';
-const cacheId = `${appId}_${eXo.env.portal.profileOwnerIdentityId}`;
 
 export function init() {
   exoi18n.loadLanguageAsync(lang, url).then(i18n => {
-    const appElement = document.createElement('div');
-    appElement.id = appId;
 
     // init Vue app when locale ressources are ready
-    new Vue({
-      template: `<wallet-overview id="${appId}" v-cacheable="{cacheId: '${cacheId}'}" />`,
+    Vue.createApp({
+      template: `<wallet-overview id="${appId}" />`,
       i18n,
       vuetify,
-    }).$mount(appElement);
+    }, `#${appId}`, 'Wallet Overview');
   });
 }

wallet-webapps/src/main/webapp/vue-app/wallet-common/wallet-settings/components/WalletSettingsInternalDetails.vue

@@ -124,9 +124,6 @@ export default {
   },
   data: () => ({
     displayManagePasswordDetails: false,
-    alert: false,
-    type: '',
-    message: '',
     provider: null
   }),
   computed: {

wallet-webapps/src/main/webapp/vue-app/wallet-reward/main.js

@@ -35,10 +35,10 @@ const appId = 'RewardApp';
 
 export function init() {
   exoi18n.loadLanguageAsync(lang, url).then(i18n => {
-    new Vue({
+    Vue.createApp({
       template: `<wallet-reward-app id="${appId}"></wallet-reward-app>`,
       i18n,
       vuetify,
-    }).$mount(`#${appId}`);
+    }, `#${appId}`, 'Wallet Reward');
   });
 }