#740 | add confirmation step before downloading image from nft

src/boot/errorHandling.js

@@ -23,7 +23,7 @@ const errorNotification = function(error, dismiss = false) {
  timeout: dismiss ? 0 : 5000,
  message: `${errorStr}`,
  actions: dismiss ? [
- { label: this.$t('notification.dismiss_label'), color: 'white' },
+ { label: $t('notification.dismiss_label'), color: 'white' },
  ] : [],
  });
 };
@@ -54,6 +54,10 @@ const successNotification = function(message) {
 
 // ---------- new notification layouts ---------------
 
+let $t = function(message) {
+ return message;
+};
+
 class NotificationAction {
  constructor(payload) {
  this.label = payload.label;
@@ -70,6 +74,13 @@ 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 warningIcon = require('src/assets/icon--warning.svg');
+const icons = {
+ cross: crossIcon,
+ info: infoIcon,
+ check: checkIcon,
+ disco: discoIcon,
+ warning: warningIcon,
+};
 
 const html = `
  <div class="c-notify__container c-notify__container--{type} c-notify__container--{random}">
@@ -92,11 +103,11 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
  // action buttons
  const actions = [];
  const dismiss_btn = {
- label: this.$t('notification.dismiss_label'),
+ label: $t('notification.dismiss_label'),
  class: 'c-notify__action-btn',
  };
  const link_btn = {
- label: this.$t('notification.success_see_trx_label'),
+ label: $t('notification.success_see_trx_label'),
  color: 'positive',
  iconRight: 'launch',
  class: 'c-notify__action-btn',
@@ -105,7 +116,7 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
  },
  };
  const details_btn = {
- label: this.$t('notification.error_see_details_label'),
+ label: $t('notification.error_see_details_label'),
  class: 'c-notify__action-btn ',
  handler: () => {
  let content = '';
@@ -135,14 +146,14 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
 
  Dialog.create({
  class: 'c-notify__dialog',
- title: this.$t('notification.error_details_title'),
+ title: $t('notification.error_details_title'),
  message: '<q-card-section>' + content + '</q-card-section>',
  html: true,
  });
  },
  };
  const action_btn = {
- label: this.$t(payload?.label ?? '') ?? this.$t('notification.error_see_details_label'),
+ label: $t(payload?.label ?? '') ?? $t('notification.error_see_details_label'),
  color: payload?.color ?? type === 'error' ? 'negative' : 'positive',
  iconRight: payload?.iconRight,
  class: 'c-notify__action-btn ' + payload?.class ? payload?.class : '',
@@ -172,7 +183,7 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
  actions.splice(0, actions.length);
  }
 
- let final_message = '<span>' + this.$t(message.toString() ?? '') + '</span>';
+ let final_message = '<span>' + $t(message.toString() ?? '') + '</span>';
  if (Array.isArray(message)) {
  final_message = message.map(
  m => ` <${m.tag ?? 'span'} class="${m.class}">${m.text}</${m.tag ?? 'span'}> `,
@@ -208,7 +219,7 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
  '{random}': random,
  '{remember}': remember,
  '{message}': final_message,
- '{remember-my-choice}': this.$t('notification.dont_show_message_again'),
+ '{remember-my-choice}': $t('notification.dont_show_message_again'),
  };
 
  const finalHtml = replaceAllOccurrences(html, replacements);
@@ -225,75 +236,75 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
 };
 
 const notifySuccessTransaction = function(link) {
- return notifyMessage.bind(this)(
+ return notifyMessage (
  'success',
  checkIcon,
- this.$t('notification.success_title_trx').toUpperCase(),
- this.$t('notification.success_message_trx'),
+ $t('notification.success_title_trx').toUpperCase(),
+ $t('notification.success_message_trx'),
  link,
  );
 };
 
 const notifySuccessMessage = function(message, payload) {
- return notifyMessage.bind(this)(
+ return notifyMessage (
  'success',
  checkIcon,
- this.$t('notification.success_title_trx').toUpperCase(),
+ $t('notification.success_title_trx').toUpperCase(),
  message,
  payload,
  );
 };
 
 const notifySuccessCopy = function() {
- return notifyMessage.bind(this)(
+ return notifyMessage (
  'success',
  checkIcon,
- this.$t('notification.success_title_copied').toUpperCase(),
- this.$t('notification.success_message_copied'),
+ $t('notification.success_title_copied').toUpperCase(),
+ $t('notification.success_message_copied'),
  );
 };
 
 const notifyFailure = function(message, payload) {
- return notifyMessage.bind(this)(
+ return notifyMessage (
  'error',
  crossIcon,
- this.$t('notification.error_title').toUpperCase(),
+ $t('notification.error_title').toUpperCase(),
  message,
  payload,
  );
 };
 
 const notifyFailureWithAction = function(message, payload) {
- return notifyMessage.bind(this)(
+ return notifyMessage (
  'error',
  crossIcon,
- this.$t('notification.error_title').toUpperCase(),
+ $t('notification.error_title').toUpperCase(),
  message,
  new NotificationAction(payload),
  );
 };
 
 const notifyWarningWithAction = function(message, payload) {
- return notifyMessage.bind(this)(
+ return notifyMessage (
  'error',
  warningIcon,
- this.$t('notification.warning_title').toUpperCase(),
+ $t('notification.warning_title').toUpperCase(),
  message,
  new NotificationAction(payload),
  );
 };
 
 const notifyDisconnected = function() {
- return notifyMessage.bind(this)(
+ return notifyMessage (
  'error',
  discoIcon,
- this.$t('notification.error_title_disconnect'),
- this.$t('notification.error_message_disconnect'),
+ $t('notification.error_title_disconnect'),
+ $t('notification.error_message_disconnect'),
  );
 };
 
 const notifyNeutralMessage = function(message) {
- return notifyMessage.bind(this)(
+ return notifyMessage (
  'neutral',
  null,
  null,
@@ -308,7 +319,7 @@ const notifyRememberInfo = function(title, message, payload, key) {
  if (dismissed[id]) {
  return;
  }
- const notification = notifyMessage.bind(this)(
+ const notification = notifyMessage (
  'info',
  infoIcon,
  title,
@@ -342,25 +353,25 @@ const notifyRememberInfo = function(title, message, payload, key) {
 
 
 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);
+ app.config.globalProperties.$errorNotification = errorNotification;
+ app.config.globalProperties.$unexpectedErrorNotification = unexpectedErrorNotification;
+ app.config.globalProperties.$warningNotification = warningNotification;
+ app.config.globalProperties.$successNotification = successNotification;
  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);
- app.config.globalProperties.$notifySuccessMessage = notifySuccessMessage.bind(store);
- app.config.globalProperties.$notifySuccessCopy = notifySuccessCopy.bind(store);
- app.config.globalProperties.$notifyFailure = notifyFailure.bind(store);
- app.config.globalProperties.$notifyFailureWithAction = notifyFailureWithAction.bind(store);
- app.config.globalProperties.$notifyWarningWithAction = notifyWarningWithAction.bind(store);
- app.config.globalProperties.$notifyDisconnected = notifyDisconnected.bind(store);
- app.config.globalProperties.$notifyNeutralMessage = notifyNeutralMessage.bind(store);
- app.config.globalProperties.$notifyRememberInfo = notifyRememberInfo.bind(store);
+ app.config.globalProperties.$notifySuccessTransaction = notifySuccessTransaction;
+ app.config.globalProperties.$notifySuccessMessage = notifySuccessMessage;
+ app.config.globalProperties.$notifySuccessCopy = notifySuccessCopy;
+ app.config.globalProperties.$notifyFailure = notifyFailure;
+ app.config.globalProperties.$notifyFailureWithAction = notifyFailureWithAction;
+ app.config.globalProperties.$notifyWarningWithAction = notifyWarningWithAction;
+ app.config.globalProperties.$notifyDisconnected = notifyDisconnected;
+ app.config.globalProperties.$notifyNeutralMessage = notifyNeutralMessage;
+ app.config.globalProperties.$notifyRememberInfo = notifyRememberInfo;
  store['$notifySuccessTransaction'] = app.config.globalProperties.$notifySuccessTransaction;
  store['$notifySuccessMessage'] = app.config.globalProperties.$notifySuccessMessage;
  store['$notifySuccessCopy'] = app.config.globalProperties.$notifySuccessCopy;
@@ -373,7 +384,7 @@ export default boot(({ app, store }) => {
 
  // transaction notifications handlers
  store['$t'] = app.config.globalProperties.$t;
-
+ $t = app.config.globalProperties.$t;
 });
 
 export {
@@ -386,7 +397,11 @@ export {
  notifySuccessCopy,
  notifyFailure,
  notifyFailureWithAction,
+ notifyWarningWithAction,
  notifyDisconnected,
  notifyNeutralMessage,
  notifyRememberInfo,
+ notifyMessage,
+ icons,
+ NotificationAction,
 };

src/components/Token/NFTList.vue

@@ -3,13 +3,16 @@
 import { ref, watch, onMounted, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { indexerApi } from 'src/boot/telosApi';
+import { notifyMessage, icons, NotificationAction } from 'src/boot/errorHandling';
 import { ALLOWED_VIDEO_EXTENSIONS } from 'src/lib/utils';
 
 import AddressField from 'components/AddressField.vue';
 import BlockField from 'components/BlockField.vue';
 import { NFT, NFT_TYPE } from 'src/types/NFT';
 import { QTableProps } from 'quasar';
 
+
+
 const allowedFilters = ['contract', 'account'];
 
 const { t : $t } = useI18n();
@@ -213,6 +216,25 @@ function getPath(type: string) {
  }
  return `/${queryFilter}/${props.address}/nfts?type=${type}&includeAbi=true&limit=10000&forceMetadata=1&includePagination=true`;
 }
+
+function confirmDownloadImage(imageData: string, name: string) {
+ notifyMessage (
+ 'success',
+ icons.info,
+ $t('components.download_image'),
+ $t('components.confirm_download_image'),
+ new NotificationAction({
+ label: $t('components.confirm'),
+ handler: () => {
+ // download image
+ const link = document.createElement('a');
+ link.href = imageData;
+ link.download = name;
+ link.click();
+ },
+ }),
+ );
+}
 </script>
 
 <template>
@@ -333,14 +355,13 @@ function getPath(type: string) {
  :alt="props.row.metadata?.name"
  />
  </a>
- <a
+ <q-img
  v-else-if="isDataImage(props.row)"
- :href="props.row.metadata?.image"
- target="_blank"
- download
- >
- <q-img :src="props.row.metadata?.image" :alt="props.row.metadata?.name" />
- </a>
+ class="cursor-pointer"
+ :src="props.row.metadata?.image"
+ :alt="props.row.metadata?.name"
+ @click="confirmDownloadImage(props.row.metadata?.image, props.row.metadata?.name)"
+ />
  <a
  v-else
  :href="props.row.metadata?.image"
@@ -358,7 +379,7 @@ function getPath(type: string) {
  :href="props.row.tokenUri"
  target="_blank"
  >
- <q-icon name="download" size="sm" />
+ <q-icon size="sm" name="launch"/>
  <q-tooltip v-if="props.row.tokenUri">{{ $t('components.nfts.ipfs') }}</q-tooltip>
  </a>
  </q-td>
@@ -466,4 +487,7 @@ function getPath(type: string) {
  display: flex;
  align-items: center;
 }
+.cursor-pointer {
+ cursor: pointer;
+}
 </style>

src/i18n/de-de/index.js

@@ -270,6 +270,9 @@ export default {
  nonce: 'Nonce',
  from: 'Von',
  to: 'An',
+ download_image: 'Bild herunterladen',
+ confirm_download_image: 'Bestätigen Sie, dass Sie dieses Bild herunterladen möchten',
+ confirm: 'Bestätigen',
  transaction: {
  in: 'in',
  out: 'out',

src/i18n/en-us/index.js

@@ -217,6 +217,9 @@ export default {
  to: 'To',
  item: 'Item',
  amount: 'Amount',
+ download_image: 'Download Image',
+ confirm_download_image: 'Confirm you want to download this image',
+ confirm: 'Confirm',
  approvals: {
  token_id: 'Token ID',
  approved: 'Approved',

src/i18n/es-es/index.js

@@ -271,6 +271,9 @@ export default {
  nonce: 'Nonce',
  from: 'De',
  to: 'A',
+ download_image: 'Descargar imagen',
+ confirm_download_image: 'Confirma que quieres descargar esta imagen',
+ confirm: 'Confirmar',
  transaction: {
  in: 'entra',
  out: 'sale',

src/i18n/fr-fr/index.js

@@ -216,6 +216,9 @@ export default {
  nonce: 'Nonce',
  from: 'De',
  to: 'À',
+ download_image: 'Télécharger l’image',
+ confirm_download_image: 'Confirmez que vous voulez télécharger cette image',
+ confirm: 'Confirmer',
  approvals: {
  token_id: 'ID Jeton',
  approved: 'Approuvé',

src/i18n/pt-br/index.js

@@ -270,6 +270,9 @@ export default {
  nonce: 'Nonce',
  from: 'De',
  to: 'Para',
+ download_image: 'Baixar imagem',
+ confirm_download_image: 'Confirme que deseja baixar esta imagem',
+ confirm: 'Confirmar',
  transaction: {
  in: 'in',
  out: 'out',