warn user and remove telos cloud wallet support

src/App.vue

@@ -1,10 +1,14 @@
 <script lang="ts">
-import { useChainStore } from 'src/antelope';
+import { getAntelope, useChainStore } from 'src/antelope';
+import { ComplexMessage } from 'src/antelope/config';
 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 default {
+export const isTodayBeforeTelosCloudDown = new Date().getTime() < new Date('2023-12-31').getTime();
+
+export default defineComponent({
  name: 'App',
  created() {
  const appVersionJustUpdated = 'UPDATED_NOTIFY_USER';
@@ -51,8 +55,25 @@ export default {
  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>
 
 <template>

src/antelope/config/index.ts

@@ -3,6 +3,12 @@ import { App } from 'vue';
 import { getAntelope } from 'src/antelope';
 import { AntelopeError, AntelopeErrorPayload } from 'src/antelope/types';
 
+export interface ComplexMessage {
+ tag: string,
+ class: string,
+ text: string,
+}
+
 export class AntelopeConfig {
  transactionError(description: string, error: unknown): AntelopeError {
  if (error instanceof AntelopeError) {
@@ -36,6 +42,7 @@ export class AntelopeConfig {
  private __notify_failure_action_handler: (message: string, payload?: AntelopeErrorPayload) => void = alert;
  private __notify_disconnected_handler: () => void = alert;
  private __notify_neutral_message_handler: (message: string) => (() => void) = () => (() => void 0);
+ private __notify_remember_info_handler: (title: string, message: string | ComplexMessage[], payload: string, key: string) => (() => void) = () => (() => void 0);
 
  // ual authenticators list getter --
  private __authenticators_getter: () => Authenticator[] = () => [];
@@ -159,6 +166,10 @@ export class AntelopeConfig {
  return this.__notify_neutral_message_handler;
  }
 
+ get notifyRememberInfoHandler() {
+ return this.__notify_remember_info_handler;
+ }
+
  get authenticatorsGetter() {
  return this.__authenticators_getter;
  }
@@ -225,6 +236,15 @@ export class AntelopeConfig {
  this.__notify_neutral_message_handler = handler;
  }
 
+ public setNotifyRememberInfoHandler(handler: (
+ title: string,
+ message: string | ComplexMessage[],
+ payload: string,
+ key: string,
+ ) => (() => void)) {
+ this.__notify_remember_info_handler = handler;
+ }
+
  // setting authenticators getter --
  public setAuthenticatorsGetter(getter: () => Authenticator[]) {
  this.__authenticators_getter = getter;

src/boot/antelope.ts

@@ -35,6 +35,7 @@ export default boot(({ app }) => {
  ant.config.setNotifyFailureWithAction(app.config.globalProperties.$notifyFailureWithAction);
  ant.config.setNotifyDisconnectedHandler(app.config.globalProperties.$notifyDisconnected);
  ant.config.setNotifyNeutralMessageHandler(app.config.globalProperties.$notifyNeutralMessage);
+ ant.config.setNotifyRememberInfoHandler(app.config.globalProperties.$notifyRememberInfo);
 
  // setting log in and out callbacks --
 

src/boot/errorHandling.js

@@ -64,24 +64,28 @@ class NotificationAction {
 }
 
 const crossIcon = require('src/assets/icon--cross.svg');
+const infoIcon = require('src/assets/icon--info.svg');
 const checkIcon = require('src/assets/icon--check.svg');
 const discoIcon = require('src/assets/icon--disconnected.svg');
 
 const html = `
  <div class="c-notify__container c-notify__container--{type} c-notify__container--{random}">
  <div class="c-notify__header"></div>
- <div class="c-notify__title">
+ <div class="c-notify__title c-notify__title--{type}">
  <img src='{svg}' class="c-notify__icon" />
  <span>{title}</span>
  </div>
  <div class="c-notify__message">
- <span>{message}</span>
+ {message}
+ </div>
+ <div class="c-notify__checkbox-container c-notify__checkbox--{remember}">
+ <input type="checkbox" id="c-notify__checkbox--{remember}" class="c-notify__checkbox" />
+ <label for="c-notify__checkbox--{remember}" class="c-notify__label">{remember-my-choice}</label>
  </div>
  </div>
 `;
 
-const notifyMessage = function(type, icon, title, message, payload) {
-
+const notifyMessage = function(type, icon, title, message, payload, remember = '') {
  // action buttons
  const actions = [];
  const dismiss_btn = {
@@ -153,13 +157,15 @@ const notifyMessage = function(type, icon, title, message, payload) {
  actions.splice(0, actions.length);
  }
 
- let final_message = this.$t(message ?? '');
+ let final_message = '<span>' + this.$t(message.toString() ?? '') + '</span>';
  if (Array.isArray(message)) {
- final_message = message.map(m => ` <${m.tag ?? 'span'} class="${m.class}">${m.text}</${m.tag ?? 'span'}> `).join('');
+ final_message = message.map(
+ m => ` <${m.tag ?? 'span'} class="${m.class}">${m.text}</${m.tag ?? 'span'}> `,
+ ).join('');
  }
 
  let timeout = 4000;
- if (type === 'error') {
+ if (type === 'error' || type === 'info') {
  timeout = 0;
  }
 
@@ -170,15 +176,32 @@ const notifyMessage = function(type, icon, title, message, payload) {
 
  let random = Math.floor(Math.random() * 1000000);
 
+
+ function replaceAllOccurrences(html, replacements) {
+ let modifiedHtml = html;
+ for (let [key, value] of Object.entries(replacements)) {
+ const regex = new RegExp(key.replace(/[-\\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g');
+ modifiedHtml = modifiedHtml.replace(regex, value);
+ }
+ return modifiedHtml;
+ }
+
+ const replacements = {
+ '{svg}': icon,
+ '{type}': type,
+ '{title}': title,
+ '{random}': random,
+ '{remember}': remember,
+ '{message}': final_message,
+ '{remember-my-choice}': this.$t('notification.dont_show_message_again'),
+ };
+
+ const finalHtml = replaceAllOccurrences(html, replacements);
+
  return Notify.create({
  timeout,
  position,
- message: html
- .replace('{svg}', icon)
- .replace('{type}', type)
- .replace('{title}', title)
- .replace('{random}', random)
- .replace('{message}', final_message),
+ message: finalHtml,
  html: true,
  classes: 'c-notify',
  actions,
@@ -252,15 +275,55 @@ const notifyNeutralMessage = function(message) {
  );
 };
 
+const notifyRememberInfo = function(title, message, payload, key) {
+ const id = `c-notify__checkbox--${key}`;
+ const storageKey = 'c-notify--dismissed-messages';
+ const dismissed = JSON.parse(localStorage.getItem(storageKey)) ?? {};
+ if (dismissed[id]) {
+ return;
+ }
+ const notification = notifyMessage.bind(this)(
+ 'info',
+ infoIcon,
+ title,
+ message,
+ payload,
+ key,
+ );
+
+ const handler = (event) => {
+ // If the user click the checkbox, we set the flag in the local storage
+ if (event.target.id === id) {
+ const checkbox = document.getElementById(id);
+ if (checkbox.checked) {
+ dismissed[id] = true;
+ } else {
+ delete dismissed[id];
+ }
+ localStorage.setItem(storageKey, JSON.stringify(dismissed));
+ } else {
+ // catching Dismiss button click
+ if (event.target.parentNode.classList.contains('q-btn__content')) {
+ window.removeEventListener('click', handler);
+ }
+ }
+ };
+
+ window.addEventListener('click', handler);
+ return notification;
+};
+
+
+
 export default boot(({ app, store }) => {
- app.config.globalProperties.$errorNotification  = errorNotification.bind(store);
- app.config.globalProperties.$unexpectedErrorNotification  = unexpectedErrorNotification.bind(store);
- app.config.globalProperties.$warningNotification  = warningNotification.bind(store);
- app.config.globalProperties.$successNotification  = successNotification.bind(store);
- store['$errorNotification']  = app.config.globalProperties.$errorNotification;
- store['$unexpectedErrorNotification']  = app.config.globalProperties.$unexpectedErrorNotification;
- store['$warningNotification']  = app.config.globalProperties.$warningNotification;
- store['$successNotification']  = app.config.globalProperties.$successNotification;
+ app.config.globalProperties.$errorNotification = errorNotification.bind(store);
+ app.config.globalProperties.$unexpectedErrorNotification = unexpectedErrorNotification.bind(store);
+ app.config.globalProperties.$warningNotification = warningNotification.bind(store);
+ app.config.globalProperties.$successNotification = successNotification.bind(store);
+ store['$errorNotification'] = app.config.globalProperties.$errorNotification;
+ store['$unexpectedErrorNotification'] = app.config.globalProperties.$unexpectedErrorNotification;
+ store['$warningNotification'] = app.config.globalProperties.$warningNotification;
+ store['$successNotification'] = app.config.globalProperties.$successNotification;
 
  // new Message notifications handlers
  app.config.globalProperties.$notifySuccessTransaction = notifySuccessTransaction.bind(store);
@@ -270,13 +333,15 @@ export default boot(({ app, store }) => {
  app.config.globalProperties.$notifyFailureWithAction = notifyFailureWithAction.bind(store);
  app.config.globalProperties.$notifyDisconnected = notifyDisconnected.bind(store);
  app.config.globalProperties.$notifyNeutralMessage = notifyNeutralMessage.bind(store);
+ app.config.globalProperties.$notifyRememberInfo = notifyRememberInfo.bind(store);
  store['$notifySuccessTransaction'] = app.config.globalProperties.$notifySuccessTransaction;
  store['$notifySuccessMessage'] = app.config.globalProperties.$notifySuccessMessage;
  store['$notifySuccessCopy'] = app.config.globalProperties.$notifySuccessCopy;
  store['$notifyFailure'] = app.config.globalProperties.$notifyFailure;
  store['$notifyFailureWithAction'] = app.config.globalProperties.$notifyFailureWithAction;
  store['$notifyDisconnected'] = app.config.globalProperties.$notifyDisconnected;
  store['$notifyNeutralMessage'] = app.config.globalProperties.$notifyNeutralMessage;
+ store['$notifyRememberInfo'] = app.config.globalProperties.$notifyRememberInfo;
 
  // transaction notifications handlers
  store['$t'] = app.config.globalProperties.$t;

src/css/components/_notification.scss

@@ -29,6 +29,8 @@
  }
  // container will say if this notification is success or error and set the color
  &__container {
+ --c-notify__checkbox--display: none;
+ --c-notify__message--align: center;
  &--success {
  --notify-color: #{$notify-success};
  --c-notify__title--display: flex;
@@ -40,15 +42,33 @@
  --c-notify__title--display: flex;
  --c-notify__message--padding: 0 2rem;
  }
+ &--info {
+ --notify-color: #{$notify-info};
+ --c-notify__title--display: flex;
+ --c-notify__message--padding: 0 2rem;
+ --c-notify__checkbox--display: block;
+ --c-notify__message--align: left;
+ }
  &--neutral {
  --notify-color: #{$notify-neutral};
  --c-notify__title--display: none;
  --c-notify__message--padding: 1.2rem 2rem;
  --c-notify__header--animation: consuming-bar 5s linear forwards;
  }
-  display: flex;
+ display: flex;
  flex-direction: column;
  }
+ &__checkbox-container {
+ display: var(--c-notify__checkbox--display);
+ margin: 2rem 0 0 2rem;
+ input {
+ margin-right: 0.5rem;
+ }
+ label {
+ color: var(--text-color, #000);
+ @include text--paragraph;
+ }
+ }
  &__header {
  height: 8px;
  background-color: var(--notify-color);
@@ -70,14 +90,21 @@
  color: var(--notify-color);
  font-weight: 600;
  }
+ &--neutral {
+ display: none;
+ }
  }
  &__message {
  color: var(--text-color, #000);
  padding: var(--c-notify__message--padding);
- text-align: center;
+ text-align: var(--c-notify__message--align, center);
  span {
  @include text--paragraph;
  }
+ &--subtitle {
+ font-weight: bold;
+ margin-bottom: 1rem;
+ }
  }
  &__action-btn {
  color: var(--text-color, #000);

src/css/quasar.variables.sass

@@ -27,3 +27,4 @@ $available-color: #172c6c
 $notify-success: #255B00
 $notify-error: #880000
 $notify-neutral: #4D4D4D
+$notify-info: #008888

src/i18n/en-us/index.js

@@ -27,8 +27,7 @@ export default {
  home: {
  terms: 'Terms of Service',
  privacy: 'Privacy Policy',
- developers_banner_title: 'Developers',
- developers_banner_text: 'Find out how to integrate Telos Cloud Wallet into your app here',
+ telos_cloud_discontinued: 'Telos Cloud Wallet will be discontinued. It is crucial for you to transfer your assets out of your Telos Cloud Wallet Accounts before December 15th.',
  wallet_logo_alt: 'Telos Wallet logo',
  view_any_account: 'View Any Account',
  connect_with_wallet: 'Connect Your Wallet',
@@ -285,6 +284,7 @@ export default {
  neutral_message_wrapping: 'Wrapping <b>{quantity} {symbol}</b>',
  neutral_message_unwrapping: 'Unwrapping <b>{quantity} {symbol}</b>',
  neutral_message_withdrawing: 'Withdrawing <b>{quantity} {symbol}</b>',
+ dont_show_message_again: 'Don\'t show me this message again',
  },
  resources: {
  title: 'Network Resources',
@@ -611,4 +611,9 @@ export default {
  seconds: 'seconds',
  },
  },
+ temporal: {
+ telos_cloud_discontinued_title: 'Important',
+ telos_cloud_discontinued_message_title: 'Telos Cloud Wallet will be discontinued',
+ telos_cloud_discontinued_message_body: 'It is crucial for you to transfer your assets out of your Telos Cloud Wallet Accounts before December 31st.',
+ },
 };