Production release

src/antelope/mocks/AccountStore.ts

@@ -54,11 +54,15 @@ class AccountStore {
 
     async loginEVM({ authenticator, network, autoLogAccount }: LoginEVMActionData, trackAnalyticsEvents: boolean): Promise<boolean> {
         currentAuthenticator = authenticator;
-        currentAccount = autoLogAccount ? await authenticator.autoLogin(network, autoLogAccount, trackAnalyticsEvents) : await authenticator.login(network, trackAnalyticsEvents);
+        currentAccount = autoLogAccount
+            ? await authenticator.autoLogin(network, autoLogAccount, trackAnalyticsEvents)
+            : await authenticator.login(network, trackAnalyticsEvents);
 
-        const account = useAccountStore().getAccount(authenticator.label);
-        getAntelope().events.onLoggedIn.next(account);
-        return true;
+        if (currentAccount) {
+            const account = useAccountStore().getAccount(authenticator.label);
+            getAntelope().events.onLoggedIn.next(account);
+        }
+        return !!currentAccount;
     }
 
     logout() {

src/components/ContractTab/FunctionInterface.vue

@@ -445,7 +445,7 @@ export default defineComponent({
     <p class="text-negative output-container">
         {{ errorMessage }}
     </p>
-    <div v-if="result" class="output-container">
+    <div v-if="result !== null" class="output-container">
         {{ $t('components.contract_tab.result') }} ({{ abi?.outputs.length > 0 ? abi.outputs[0].type : '' }}):
         <router-link v-if="abi?.outputs?.[0]?.type === 'address'" :to="`/address/${result}`" >{{ result }}</router-link>
         <template v-else>{{ result }}</template>

src/components/ImagePopup.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+// Props interface
+interface Props {
+    title: string;
+    image: string;
+    previewSize: number
+}
+
+const props = defineProps<Props>();
+const { t: $t } = useI18n();
+
+// Reactive variables
+const isPopupVisible = ref(false);
+const isExpanded = ref(false);
+
+// Methods
+const togglePopup = () => {
+    isPopupVisible.value = !isPopupVisible.value;
+};
+
+const toggleExpand = () => {
+    isExpanded.value = !isExpanded.value;
+};
+
+const downloadImage = () => {
+    const link = document.createElement('a');
+    link.href = props.image;
+    link.download = 'downloaded-image';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};
+
+const previousScrollY = ref(0);
+watch(isPopupVisible, (value) => {
+    // This is a workaround very related to the issue with the dialog not scrolling to the top
+    // https://github.com/telosnetwork/teloscan/issues/625
+    if (value) {
+        previousScrollY.value = window.scrollY;
+    } else {
+        // what for the scroll and if it moves, correct it and end
+        const timer = setInterval(() => {
+            if (window.scrollY > 0) {
+                window.scrollTo({ top: previousScrollY.value, behavior: 'instant' });
+                clearInterval(timer);
+            }
+        }, 0);
+        // avoid the interval to run forever
+        setTimeout(() => {
+            window.scrollTo({ top: previousScrollY.value, behavior: 'instant' });
+            clearInterval(timer);
+        }, 100);
+    }
+});
+
+watch(() => props.previewSize, () => {
+    console.log('props.previewSize', props.previewSize);
+});
+
+</script>
+
+<template>
+<div class="c-image-viewer">
+    <img
+        :src="props.image"
+        :width="props.previewSize"
+        class="c-image-viewer__thumbnail"
+        alt="thumbnail"
+        @click="togglePopup"
+    >
+    <q-dialog v-model="isPopupVisible">
+        <q-card
+            :class="{
+                'c-image-viewer__popup': true,
+                'c-image-viewer__popup--expanded': isExpanded
+            }"
+        >
+            <q-card-section class="c-image-viewer__header">
+                <div>{{ props.title }}</div>
+                <div>
+                    <q-btn
+                        flat
+                        dense
+                        :icon="isExpanded ? 'crop_original': 'crop_free'"
+                        :class="{'c-image-viewer__header-btn--selected': isExpanded}"
+                        @click="toggleExpand"
+                    >
+                        <q-tooltip>{{ $t('components.toggle_expand') }}</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                        flat
+                        dense
+                        icon="file_download"
+                        @click="downloadImage"
+                    >
+                        <q-tooltip>{{ $t('components.download_image') }}</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                        flat
+                        dense
+                        icon="close"
+                        @click="togglePopup"
+                    >
+                        <q-tooltip>{{ $t('components.close') }}</q-tooltip>
+                    </q-btn>
+                </div>
+            </q-card-section>
+            <q-card-section class="c-image-viewer__body" @click="toggleExpand">
+                <div
+                    v-if="isExpanded"
+                    :style="{ backgroundImage: `url(${props.image})` }"
+                    class="c-image-viewer__image c-image-viewer__image--embeded"
+                    alt="full size"
+                ></div>
+                <img
+                    v-else
+                    :src="props.image"
+                    :class="{
+                        'c-image-viewer__image': true,
+                    }"
+                    alt="full size"
+                >
+            </q-card-section>
+        </q-card>
+    </q-dialog>
+</div>
+</template>
+
+<style lang="scss">
+.c-image-viewer {
+    &__thumbnail {
+        cursor: pointer;
+    }
+
+    &__popup {
+        --full-width: auto;
+        --full-height: auto;
+        width: var(--full-width);
+        height: var(--full-height);
+        &--expanded {
+            --full-width: 98vw;
+            --full-height: 98vh;
+        }
+        background-color: var(--bg-color);
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        max-width: none !important;
+    }
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: var(--header-bg-color);
+        padding: 0.5rem;
+        color: var(--text-color);
+
+        &-btn--selected {
+            background-color: var(--btn-s-bg-color);
+            color: var(--btn-s-color);
+        }
+    }
+
+    &__body {
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: auto;
+    }
+
+    &__image {
+        max-width: 100%;
+        max-height: 100%;
+    }
+
+    &__image--embeded {
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+        width: 100%;
+        height: 100%;
+    }
+
+    &__image--original {
+        max-width: none;
+        max-height: none;
+    }
+}
+</style>

src/components/InternalTransactionFlatTable.vue

@@ -210,6 +210,16 @@ export default {
             this.pagination.sortBy = sortBy;
             this.pagination.descending = descending;
             this.transactions = [...result.data.results];
+            this.transactions.forEach((transaction) => {
+                let timestamp = transaction.timestamp;
+                // This is a workaround to fix the timestamp issue (it should be fixed in the API)
+                // https://github.com/telosnetwork/teloscan-indexer/issues/234
+                if (typeof timestamp === 'string') {
+                    timestamp = new Date(timestamp).getTime() - new Date().getTimezoneOffset() * 60 * 1000;
+                    transaction.timestamp = timestamp;
+                }
+            });
+
             let totalTraces = 0;
             let processedTransactions = 0;
             for (const transaction of this.transactions) {

src/components/LoginModal.vue

@@ -154,15 +154,7 @@ async function loginWithAntelope(name:string, autoLogAccount?: string) {
     }
     const authenticator = auth.newInstance(label);
     const network = useChainStore().currentChain.settings.getNetwork();
-    useAccountStore().loginEVM({ authenticator, network, autoLogAccount }, true).then(() => {
-        const address = useAccountStore().getAccount(label).account;
-        setLogin({ address });
-        localStorage.setItem(LOGIN_DATA_KEY, JSON.stringify({
-            type: LOGIN_EVM,
-            provider: name,
-            account: address,
-        }));
-    });
+    useAccountStore().loginEVM({ authenticator, network, autoLogAccount }, true);
     emit('hide');
 }
 

src/components/Token/NFTList.vue

@@ -3,19 +3,20 @@
 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 ImagePopup from 'src/components/ImagePopup.vue';
 import { NFT, NFT_TYPE } from 'src/types/NFT';
-import { QTableProps } from 'quasar';
+import { QTableProps, useQuasar } from 'quasar';
 
 
 
 const allowedFilters = ['contract', 'account'];
 
 const { t : $t } = useI18n();
+const $q = useQuasar();
 
 const props = defineProps({
     address: {
@@ -158,12 +159,6 @@ function hasVideo(nft: NFT) {
     return nft;
 }
 
-function isDataImage(nft: NFT) {
-    let image = getMedia(nft);
-    const regex = new RegExp(/(data:image\/[^;]+;base64[^"]+)/);
-    return regex.test(image);
-}
-
 async function onRequest() {
     loading.value = true;
 
@@ -217,24 +212,20 @@ 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();
-            },
-        }),
-    );
-}
+// Media display
+const previewSize = ref(36);
+const toggleMediaSize = () => {
+    previewSize.value = (previewSize.value === 36) ? 72 : 36;
+    // save in storage
+    localStorage.setItem('mediaSize', previewSize.value.toString());
+};
+onMounted(() => {
+    const size = localStorage.getItem('mediaSize');
+    if(size){
+        previewSize.value = parseInt(size);
+    }
+});
+
 </script>
 
 <template>
@@ -256,7 +247,14 @@ function confirmDownloadImage(imageData: string, name: string) {
                     :key="col.name"
                     :props="props"
                 >
-                    <div class="u-flex--center-y">
+                    <div v-if="col.name==='media'" class="u-flex--center-y" @click="toggleMediaSize">
+                        <a>{{ col.label }}</a>
+                        <q-icon class="info-icon q-ml-xs" name="far fa-question-circle"/>
+                        <q-tooltip v-it="$q.screen.gt.md" anchor="bottom middle" self="top middle">
+                            {{ $t('components.click_to_toggle_media_size') }}
+                        </q-tooltip>
+                    </div>
+                    <div v-else class="u-flex--center-y">
                         {{ col.label }}
                     </div>
                 </q-th>
@@ -342,35 +340,16 @@ function confirmDownloadImage(imageData: string, name: string) {
                         v-else-if="props.row.imageCache || props.row.metadata?.image"
                         clickable="clickable"
                     >
-                        <a
-                            v-if="props.row.imageCache && !isDataImage(props.row)"
-                            :href="
+                        <ImagePopup
+                            :image="
                                 (props.row.imageCache) ? props.row.imageCache + '/1440.webp' :
                                 props.row.metadata?.image
                             "
-                            target="_blank"
-                        >
-                            <q-img
-                                :src="props.row.imageCache + '/280.webp'"
-                                :alt="props.row.metadata?.name"
-                            />
-                        </a>
-                        <q-img
-                            v-else-if="isDataImage(props.row)"
-                            class="cursor-pointer"
-                            :src="props.row.metadata?.image"
-                            :alt="props.row.metadata?.name"
-                            @click="confirmDownloadImage(props.row.metadata?.image, props.row.metadata?.name)"
+                            :title="props.row.metadata?.name"
+                            :previewSize="previewSize"
                         />
-                        <a
-                            v-else
-                            :href="props.row.metadata?.image"
-                            target="_blank"
-                        >
-                            <q-img :src="props.row.metadata?.image" :alt="props.row.metadata?.name" />
-                        </a>
                     </span>
-                    <q-tooltip v-if="props.row?.metadata?.description">{{ props.row.metadata.description }}</q-tooltip>
+                    <q-tooltip v-if="props.row?.metadata?.description && $q.screen.gt.md">{{ props.row.metadata.description }}</q-tooltip>
                 </q-td>
                 <q-td key="metadata" :props="props">
                     <a