refactor i18n entries containing html to avoid xss telos wallet

src/App.vue

@@ -1,13 +1,10 @@
 <script lang="ts">
-import { getAntelope, useChainStore } from 'src/antelope';
-import { ComplexMessage } from 'src/antelope/config';
+import { useChainStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { TELOS_CHAIN_IDS } from 'src/antelope/chains/chain-constants';
 import packageInfo from '../package.json';
 import { defineComponent } from 'vue';
 
-export const isTodayBeforeTelosCloudDown = new Date().getTime() < new Date('2023-12-31').getTime();
-
 export default defineComponent({
     name: 'App',
     created() {
@@ -55,23 +52,6 @@ export default defineComponent({
             script.defer = true;
             document.body.appendChild(script);
         }
-
-        if (isTodayBeforeTelosCloudDown) {
-            getAntelope().config.notifyRememberInfoHandler(
-                this.$t('temporal.telos_cloud_discontinued_title'),
-                [{
-                    tag: 'p',
-                    class: 'c-notify__message--subtitle',
-                    text: this.$t('temporal.telos_cloud_discontinued_message_title'),
-                }, {
-                    tag: 'p',
-                    class: '',
-                    text: this.$t('temporal.telos_cloud_discontinued_message_body'),
-                }],
-                '',
-                'telos-cloud-discontinued',
-            );
-        }
     },
 });
 </script>

src/api/fuel.js

@@ -312,16 +312,23 @@ async function confirmWithUser(user/*: User*/, fees/*: string | null*/) {
         };
 
         // this are the normal texts for random wallet.
-        const cancel/*: string | boolean*/ = GreymassFuelService.globals.$t('api.reject');
-        const ok = GreymassFuelService.globals.$t('api.confirm');
-        let message = GreymassFuelService.globals.$t('api.greymass_fuel_message');
+        const $t = GreymassFuelService.globals.$t;
+        const cancel/*: string | boolean*/ = $t('api.reject');
+        const ok = $t('api.confirm');
+        let message = $t('api.greymass_fuel_message_1') + '<br/><br/>' + $t('api.greymass_fuel_message_2');
 
         if (typeof fees === 'string') {
-            message = GreymassFuelService.globals.$t('api.greymass_fuel_message_fees', { fees });
+            message =
+                $t('api.greymass_fuel_message_fees_1') +
+                '<br/><br/>' +
+                $t('api.greymass_fuel_message_fees_2') +
+                '<br/><br/>' +
+                '<div><center><h5><b>' + fees + '</b></h5></center><div><br/>' +
+                $t('api.greymass_fuel_message_fees_4');
         }
 
         Dialog.create({
-            title: GreymassFuelService.globals.$t('api.greymass_dialog_title'),
+            title: $t('api.greymass_dialog_title'),
             message,
             html: true,
             cancel,
@@ -339,7 +346,7 @@ async function confirmWithUser(user/*: User*/, fees/*: string | null*/) {
                 },
                 items: [
                     {
-                        label: GreymassFuelService.globals.$t('api.remember_my_decision'),
+                        label: $t('api.remember_my_decision'),
                         value: 'remember',
                         color: 'primary' },
                 ],

src/i18n/en-us/index.js

@@ -4,16 +4,17 @@ export default {
         reject: 'Reject',
         remember_my_decision: 'Remember my decision',
         greymass_dialog_title: 'Resource Warning!',
-        greymass_fuel_message:
-            'Your account doesn\'t have sufficient resources (CPU, NET, or RAM) to pay for your next transaction. ' +
-            'Don\'t worry! Telos has partnered with Greymass to proceed with your transaction using "Greymass Fuel", allowing you to continue for free.<br/><br/>' +
-            'We recommend powering up your account with at least 0.5 TLOS in CPU and NET each and purchasing RAM, as this service is not supported on all dAPPs in our ecosystem. Please <a src="https://wallet.telos.net/" target="_blank">click here</a> to proceed and power up your account',
-        greymass_fuel_message_fees:
-            'Your account doesn\'t have sufficient resources (CPU, NET, or RAM) to pay for your next transaction and it can not be processed without fees. ' +
-            'Telos has partnered with Greymass to proceed with your transaction using "Greymass Fuel", reducing cost significantly.<br/><br/>' +
-            'Please confirm fees below to proceed.<br/><br/>' +
-            '<div><center><h5><b>{fees}</b></h5></center><div><br/>' +
-            'We recommend powering up your account with at least 0.5 TLOS in CPU and NET each and purchasing RAM, as this service is not supported on all dAPPs in our ecosystem. Please <a src="https://wallet.telos.net/" target="_blank">click here</a> to proceed and power up your account',
+        greymass_fuel_message_1: 'Your account doesn\'t have sufficient resources (CPU, NET, or RAM) to pay for your next transaction. ' +
+            'Don\'t worry! Telos has partnered with Greymass to proceed with your transaction using "Greymass Fuel", allowing you to continue for free.',
+        greymass_fuel_message_2: 'We recommend powering up your account with at least 0.5 TLOS in CPU and NET each and purchasing RAM, as this service is not supported on all dAPPs in our ecosystem. ',
+        greymass_fuel_message_fees_1: 'Your account doesn\'t have sufficient resources (CPU, NET, or RAM) to pay for your next transaction and it can not be processed without fees. ' +
+            'Telos has partnered with Greymass to proceed with your transaction using "Greymass Fuel", reducing cost significantly.',
+        greymass_fuel_message_fees_2: 'Please confirm fees below to proceed.',
+        greymass_fuel_message_fees_3: '{fees}',
+        greymass_fuel_message_fees_4: 'We recommend powering up your account with at least 0.5 TLOS in CPU and NET each and purchasing RAM, as this service is not supported on all dAPPs in our ecosystem. ',
+        greymass_fuel_message_please: 'Please ',
+        greymass_fuel_message_click_here: 'click here',
+        greymass_fuel_message_to_proceed: ' to proceed and power up your account.',
     },
     navbar: {
         wallet: 'Wallet',
@@ -269,7 +270,7 @@ export default {
         success_title_trx: 'Success',
         success_title_copied: 'Copied',
         success_message_trx: 'Your transaction has been processed. For detailed information, click the link below.',
-        success_message_revoking: 'Revoking <b>{symbol}</b> allowance for <b>{address}</b> was successful.',
+        success_message_revoking: 'Revoking {symbol} allowance for {address} was successful.',
         success_message_copied: 'Your account name has been copied to the clipboard.',
         success_see_trx_label: 'See Transaction',
         dismiss_label: 'Dismiss',
@@ -278,13 +279,13 @@ export default {
         error_message_disconnect: 'We\'re sorry, it looks like you\'re not connected to the internet. Please check your network connection and try again.',
         error_see_details_label: 'See Details',
         error_details_title: 'Error Details',
-        neutral_message_sending: 'Sending <b>{quantity}</b> to <b>{address}</b>',
-        neutral_message_staking: 'Staking <b>{quantity} {symbol}</b>',
-        neutral_message_unstaking: 'Unstaking <b>{quantity} {symbol}</b>',
-        neutral_message_revoking: 'Revoking  <b>{symbol}</b> allowance for <b>{address}</b>',
-        neutral_message_wrapping: 'Wrapping <b>{quantity} {symbol}</b>',
-        neutral_message_unwrapping: 'Unwrapping <b>{quantity} {symbol}</b>',
-        neutral_message_withdrawing: 'Withdrawing <b>{quantity} {symbol}</b>',
+        neutral_message_sending: 'Sending {quantity} to {address}',
+        neutral_message_staking: 'Staking {quantity} {symbol}',
+        neutral_message_unstaking: 'Unstaking {quantity} {symbol}',
+        neutral_message_revoking: 'Revoking  {symbol} allowance for {address}',
+        neutral_message_wrapping: 'Wrapping {quantity} {symbol}',
+        neutral_message_unwrapping: 'Unwrapping {quantity} {symbol}',
+        neutral_message_withdrawing: 'Withdrawing {quantity} {symbol}',
         dont_show_message_again: 'Don\'t show me this message again',
     },
     resources: {
@@ -612,9 +613,4 @@ export default {
             seconds: 'seconds',
         },
     },
-    temporal: {
-        telos_cloud_discontinued_title: 'Important',
-        telos_cloud_discontinued_message_title: 'Attention Users: Telos Cloud Wallet account option will be discontinued.',
-        telos_cloud_discontinued_message_body:'The Telos Cloud Wallet (ORE ID via Google) account option to connect and sign transactions will be discontinued after December 31st. If you use the Telos Cloud Wallet to access your account, please transfer your assets to another wallet before this deadline. <strong> This change does <i>not</i> impact users accessing their accounts via Metamask, WalletConnect, Anchor, or other sign-in methods.</strong>',
-    },
 };

src/pages/demo/NotificationDemos.vue

@@ -17,30 +17,30 @@ export default defineComponent({
         // InProgress -----
         notifyInProgress_sending() {
             console.debug('notifyInProgress_sending()');
-            const quantity = '123.0427 TLOS';
-            const address = '0x8a7C...3b0F';
+            const quantity = '<b>123.0427 TLOS</b>';
+            const address = '<b>0x8a7C...3b0F</b>';
             (this as any).$notifyNeutralMessage(
                 this.$t('notification.neutral_message_sending', { quantity, address }),
             );
         },
         notifyInProgress_staking() {
             console.debug('notifyInProgress_staking()');
-            const quantity = '123.0427 TLOS';
+            const quantity = '<b>123.0427 TLOS</b>';
             (this as any).$notifyNeutralMessage(
                 this.$t('notification.neutral_message_staking', { quantity }),
             );
         },
         notifyInProgress_unstaking() {
             console.debug('notifyInProgress_unstaking()');
-            const quantity = '123.0427 TLOS';
+            const quantity = '<b>123.0427 TLOS</b>';
             (this as any).$notifyNeutralMessage(
                 this.$t('notification.neutral_message_unstaking', { quantity }),
             );
         },
         notifyInProgress_revoking() {
             console.debug('notifyInProgress_revoking()');
-            const symbol = 'ETH';
-            const address = '0x8a7C...3b0F';
+            const symbol = '<b>ETH</b>';
+            const address = '<b>0x8a7C...3b0F</b>';
             (this as any).$notifyNeutralMessage(
                 this.$t('notification.neutral_message_revoking', { symbol, address }),
             );
@@ -50,8 +50,8 @@ export default defineComponent({
             (this as any).$notifySuccessTransaction('https://www.teloscan.io/tx/0x4ee306e0046f3adb37d2943e1954835cbaa85a21e57046c5229b7fbb7f504e94');
         },
         notifySuccess_revoking() {
-            const address = '0x8a7C...3b0F';
-            const symbol = 'ETH';
+            const address = '<b>0x8a7C...3b0F</b>';
+            const symbol = '<b>ETH</b>';
             (this as any).$notifySuccessMessage(
                 this.$t('notification.success_message_revoking', { address, symbol }),
             );

src/pages/evm/nfts/NftTransferForm.vue

@@ -74,7 +74,7 @@ onMounted(() => {
 
 async function startTransfer() {
     transferLoading.value = true;
-    const nameString = `${props.nft.contractPrettyName || props.nft.contractAddress} #${props.nft.id}`;
+    const nameString = `<b>${props.nft.contractPrettyName || props.nft.contractAddress} #${props.nft.id}</b>`;
     try {
         const trx = await nftStore.transferNft(
             CURRENT_CONTEXT,
@@ -85,8 +85,9 @@ async function startTransfer() {
             address.value as addressString,
             quantityToTransfer.value,
         );
+        const truncatedAddress = `<b>${truncateAddress(address.value as addressString)}</b>`;
         const dismiss = ant.config.notifyNeutralMessageHandler(
-            $t('notification.neutral_message_sending', { quantity: nameString, address: truncateAddress(address.value) }),
+            $t('notification.neutral_message_sending', { quantity: nameString, address: truncatedAddress }),
         );
         trx.wait().then(() => {
             ant.config.notifySuccessfulTrxHandler(

src/pages/evm/staking/StakingTab.vue

@@ -135,7 +135,7 @@ async function handleCtaClick() {
             const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
 
             const dismiss = ant.config.notifyNeutralMessageHandler(
-                $t('notification.neutral_message_staking', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+                $t('notification.neutral_message_staking', { quantity: `<b>${formattedAmount}</b>`, symbol: `<b>${systemTokenSymbol}</b>` }),
             );
 
             tx.wait().then(() => {

src/pages/evm/staking/UnstakingTab.vue

@@ -116,7 +116,7 @@ async function handleCtaClick() {
             const formattedAmount = formatWei(outputModelValue.value, systemTokenDecimals, displayDecimals);
 
             const dismiss = ant.config.notifyNeutralMessageHandler(
-                $t('notification.neutral_message_unstaking', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+                $t('notification.neutral_message_unstaking', { quantity: `<b>${formattedAmount}</b>`, symbol: `<b>${systemTokenSymbol}</b>` }),
             );
 
             tx.wait().then(() => {

src/pages/evm/staking/WithdrawTab.vue

@@ -63,7 +63,7 @@ const handleWithdrawClick = async () => {
         const formattedAmount = formatWei(withdrawableBalanceBn.value, systemTokenDecimals, 4);
 
         const dismiss = ant.config.notifyNeutralMessageHandler(
-            $t('notification.neutral_message_withdrawing', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+            $t('notification.neutral_message_withdrawing', { quantity: `<b>${formattedAmount}</b>`, symbol: `<b>${systemTokenSymbol}</b>` }),
         );
 
         tx.wait().then(() => {

src/pages/evm/wallet/SendPage.vue

@@ -245,8 +245,8 @@ export default defineComponent({
                     const chain_settings = ant.stores.chain.loggedEvmChain?.settings;
                     if(chain_settings) {
                         // we send the notification before the transaction is mined
-                        const quantity = `${formatWei(amount, token.decimals, WEI_PRECISION)} ${token.symbol}`;
-                        const address = to.substring(0, 6) + '...' + to.substring(to.length - 4, to.length);
+                        const quantity = `<b>${formatWei(amount, token.decimals, WEI_PRECISION)} ${token.symbol}</b>`;
+                        const address = `<b>${to.substring(0, 6)}...${to.substring(to.length - 4)}</b>`;
                         const dismiss = ant.config.notifyNeutralMessageHandler(
                             this.$t('notification.neutral_message_sending', { quantity, address }),
                         );

src/pages/evm/wrap/UnwrapTab.vue

@@ -92,7 +92,7 @@ async function handleUnwrapClick() {
             const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
 
             const dismiss = ant.config.notifyNeutralMessageHandler(
-                $t('notification.neutral_message_unwrapping', { quantity: formattedAmount, symbol: wrappedTokenSymbol }),
+                $t('notification.neutral_message_unwrapping', { quantity: `<b>${formattedAmount}</b>`, symbol: `<b>${systemTokenSymbol}</b>` }),
             );
 
             tx.wait().then(() => {

src/pages/evm/wrap/WrapTab.vue

@@ -109,7 +109,7 @@ async function handleCtaClick() {
             const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
 
             const dismiss = ant.config.notifyNeutralMessageHandler(
-                $t('notification.neutral_message_wrapping', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+                $t('notification.neutral_message_wrapping', { quantity: `<b>${formattedAmount}</b>`, symbol: `<b>${systemTokenSymbol}</b>` }),
             );
 
             tx.wait().then(() => {

src/pages/home/EVMLoginButtons.vue

@@ -5,7 +5,6 @@ import { QSpinnerFacebook } from 'quasar';
 import { OreIdAuth } from 'src/antelope/wallets';
 import { Menu } from 'src/pages/home/MenuType';
 import InlineSvg from 'vue-inline-svg';
-import { isTodayBeforeTelosCloudDown } from 'src/App.vue';
 
 export default defineComponent({
     name: 'EVMLoginButtons',
@@ -130,6 +129,7 @@ export default defineComponent({
             emit('update:modelValue', Menu.CLOUD);
         };
 
+        const showTelosCloudButton = false;
 
         return {
             isLoading,
@@ -150,7 +150,7 @@ export default defineComponent({
             notifyEnableBrave,
             redirectToMetamaskDownload,
             redirectToSafepalDownload,
-            isTodayBeforeTelosCloudDown,
+            showTelosCloudButton,
             // menu navigation
             showMainMenu,
             showTelosCloudMenu,
@@ -166,7 +166,7 @@ export default defineComponent({
     <template v-if="showMainMenu">
 
         <!-- Google OAuth Provider -->
-        <div v-if="isTodayBeforeTelosCloudDown" class="c-evm-login-buttons__option c-evm-login-buttons__option--telos-cloud" @click="setCloudMenu()">
+        <div v-if="showTelosCloudButton" class="c-evm-login-buttons__option c-evm-login-buttons__option--telos-cloud" @click="setCloudMenu()">
             <div class="c-evm-login-buttons__cloud-btn-container">
                 <div class="c-evm-login-buttons__cloud-btn-line-title">
                     <img