Merge branch '703-the-home-page-needs-styling-adjustments' of https:/…

…/github.com/telosnetwork/telos-wallet into 689-debug-tools-for-antelope-lib

public/branding/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

quasar.conf.js

@@ -147,27 +147,22 @@ module.exports = function(/* ctx */) {
                 theme_color: '#027be3',
                 icons: [
                     {
-                        src: 'icons/icon-128x128.png',
+                        src: 'branding/android-chrome-192x192.png',
                         sizes: '128x128',
                         type: 'image/png',
                     },
                     {
-                        src: 'icons/icon-192x192.png',
+                        src: 'branding/android-chrome-192x192.png',
                         sizes: '192x192',
                         type: 'image/png',
                     },
                     {
-                        src: 'icons/icon-256x256.png',
+                        src: 'branding/android-chrome-512x512.png',
                         sizes: '256x256',
                         type: 'image/png',
                     },
                     {
-                        src: 'icons/icon-384x384.png',
-                        sizes: '384x384',
-                        type: 'image/png',
-                    },
-                    {
-                        src: 'icons/icon-512x512.png',
+                        src: 'branding/android-chrome-512x512.png',
                         sizes: '512x512',
                         type: 'image/png',
                     },

src/antelope/chains/EVMChainSettings.ts

@@ -42,6 +42,7 @@ import { toStringNumber } from 'src/antelope/stores/utils/currency-utils';
 import { dateIsWithinXMinutes } from 'src/antelope/stores/utils/date-utils';
 import { CURRENT_CONTEXT, getAntelope, useContractStore, useNftsStore } from 'src/antelope';
 import { WEI_PRECISION, PRICE_UPDATE_INTERVAL_IN_MIN } from 'src/antelope/stores/utils';
+import { BehaviorSubject, filter } from 'rxjs';
 
 
 export default abstract class EVMChainSettings implements ChainSettings {
@@ -89,6 +90,9 @@ export default abstract class EVMChainSettings implements ChainSettings {
     // This variable is used to simulate a bad indexer health state
     indexerBadHealthSimulated = false;
 
+    // This observable is used to check if the indexer health state was already checked
+    indexerChecked$ = new BehaviorSubject(false);
+
     simulateIndexerDown(isBad: boolean) {
         this.indexerBadHealthSimulated = isBad;
     }
@@ -206,6 +210,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
         // update indexer health state
         promise.then((state) => {
             this._indexerHealthState.state = state;
+            this.indexerChecked$.next(true);
         });
 
         return promise;
@@ -216,13 +221,18 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * This warning should appear only once per session.
      */
     checkAndWarnIndexerHealth() {
-        if (!this.indexerHealthWarningShown && !this.isIndexerHealthy()) {
-            this.indexerHealthWarningShown = true;
-            const  ant = getAntelope();
-            ant.config.notifyNeutralMessageHandler(
-                ant.config.localizationHandler('antelope.chain.indexer_bad_health_warning'),
-            );
-        }
+        this.indexerChecked$.pipe(
+            // This filter only allows to continue if the indexer health was already checked
+            filter(indexerChecked => indexerChecked === true),
+        ).subscribe(() => {
+            if (!this.indexerHealthWarningShown && !this.isIndexerHealthy()) {
+                this.indexerHealthWarningShown = true;
+                const  ant = getAntelope();
+                ant.config.notifyNeutralMessageHandler(
+                    ant.config.localizationHandler('antelope.chain.indexer_bad_health_warning'),
+                );
+            }
+        });
     }
 
     isIndexerHealthy(): boolean {
@@ -632,7 +642,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
             .then(tokens => tokens.map(t => ({
                 ...t,
                 network: this.getNetwork(),
-                logoURI: t.logoURI?.replace('ipfs://', 'https://w3s.link/ipfs/') ?? require('src/assets/logo--tlos.svg'),
+                logoURI: t.logoURI?.replace('ipfs://', 'https://w3s.link/ipfs/') ?? require('src/assets/tokens/telos.png'),
             }) as unknown as TokenSourceInfo))
             .then(tokens => tokens.map(t => new TokenClass(t)))
             .then(tokens => [this.getSystemToken(), this.getWrappedSystemToken(), this.getStakedSystemToken(), ...tokens]);

src/antelope/chains/NativeChainSettings.ts

@@ -205,7 +205,7 @@ export default abstract class NativeChainSettings implements ChainSettings {
             .then(tokens => tokens.map(t => ({
                 ...t,
                 network: this.getNetwork(),
-                logoURI: t.logoURI?.replace('ipfs://', 'https://w3s.link/ipfs/') ?? require('src/assets/logo--tlos.svg'),
+                logoURI: t.logoURI?.replace('ipfs://', 'https://w3s.link/ipfs/') ?? require('src/assets/tokens/telos.png'),
             }) as unknown as TokenSourceInfo))
             .then(originals => originals.map(info => new TokenClass(info)))
             .catch((error) => {

src/antelope/chains/evm/telos-evm-testnet/index.ts

@@ -6,7 +6,7 @@ import { TokenClass, TokenSourceInfo } from 'src/antelope/types';
 import { useUserStore } from 'src/antelope';
 import { getFiatPriceFromIndexer } from 'src/api/price';
 
-const LOGO = 'https://raw.githubusercontent.com/telosnetwork/images/master/logos_2021/Symbol%202.svg';
+const LOGO = 'https://raw.githubusercontent.com/telosnetwork/token-list/main/logos/telos.png';
 const CHAIN_ID = '41';
 export const NETWORK = 'telos-evm-testnet';
 const DISPLAY = 'Telos EVM Testnet';
@@ -28,7 +28,7 @@ const S_TOKEN = new TokenClass({
     network: NETWORK,
     decimals: 18,
     address: '0xa9991E4daA44922D00a78B6D986cDf628d46C4DD',
-    logo: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
+    logo: 'https://raw.githubusercontent.com/telosnetwork/token-list/main/logos/stlos.png',
     isNative: false,
     isSystem: false,
 } as TokenSourceInfo);
@@ -39,7 +39,7 @@ const W_TOKEN = new TokenClass({
     network: NETWORK,
     decimals: 18,
     address: '0xaE85Bf723A9e74d6c663dd226996AC1b8d075AA9',
-    logo: 'https://raw.githubusercontent.com/telosnetwork/images/master/logos_2021/Symbol%202.svg',
+    logo: 'https://raw.githubusercontent.com/telosnetwork/token-list/main/logos/telos.png',
     isNative: false,
     isSystem: false,
 } as TokenSourceInfo);

src/antelope/chains/evm/telos-evm/index.ts

@@ -6,7 +6,7 @@ import { TokenClass, TokenSourceInfo } from 'src/antelope/types';
 import { useUserStore } from 'src/antelope';
 import { getFiatPriceFromIndexer } from 'src/api/price';
 
-const LOGO = 'https://raw.githubusercontent.com/telosnetwork/images/master/logos_2021/Symbol%202.svg';
+const LOGO = 'https://raw.githubusercontent.com/telosnetwork/token-list/main/logos/telos.png';
 const CHAIN_ID = '40';
 export const NETWORK = 'telos-evm';
 const DISPLAY = 'Telos EVM Mainnet';
@@ -28,7 +28,7 @@ const S_TOKEN = new TokenClass({
     network: NETWORK,
     decimals: 18,
     address: '0xB4B01216a5Bc8F1C8A33CD990A1239030E60C905',
-    logo: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
+    logo: 'https://raw.githubusercontent.com/telosnetwork/token-list/main/logos/stlos.png',
     isNative: false,
     isSystem: false,
 } as TokenSourceInfo);
@@ -39,7 +39,7 @@ const W_TOKEN = new TokenClass({
     network: NETWORK,
     decimals: 18,
     address: '0xD102cE6A4dB07D247fcc28F366A623Df0938CA9E',
-    logo: 'https://raw.githubusercontent.com/telosnetwork/images/master/logos_2021/Symbol%202.svg',
+    logo: 'https://raw.githubusercontent.com/telosnetwork/token-list/main/logos/telos.png',
     isNative: false,
     isSystem: false,
 } as TokenSourceInfo);

src/components/evm/AppNav.vue

@@ -207,7 +207,7 @@ export default defineComponent({
         <div class="flex justify-between">
             <img
                 ref="logo-image"
-                src="~assets/logo--telos-wallet.svg"
+                src="branding/telos-wallet-light.png"
                 :alt="$t('home.wallet_logo_alt')"
                 tabindex="0"
                 role="link"
@@ -279,8 +279,9 @@ export default defineComponent({
                 @click="goTo('evm-staking')"
                 @keypress.space.enter="goTo('evm-staking')"
             >
-                <InlineSvg
-                    :src="require('src/assets/icon--acorn.svg')"
+
+                <img
+                    src="/branding/stlos.png"
                     :class="{
                         'c-app-nav__icon': true,
                         'c-app-nav__icon--acorn': true,
@@ -289,7 +290,7 @@ export default defineComponent({
                     height="24"
                     width="24"
                     aria-hidden="true"
-                />
+                >
                 {{ $t('nav.staking') }}
                 <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }}
                     <q-spinner
@@ -466,9 +467,10 @@ export default defineComponent({
     }
 
     &__logo {
-        height: 56px;
+        width: 200px;
         margin-top: 24px;
-        margin-left: 32px;
+        margin-left: 48px;
+        margin-right: 48px;
         cursor: pointer;
     }
 
@@ -487,6 +489,10 @@ export default defineComponent({
         margin-bottom: 32px;
         width: max-content;
 
+        .c-app-nav__icon--acorn{
+            filter: grayscale(1);
+        }
+
         &:hover {
             color: var(--link-color);
 
@@ -495,8 +501,8 @@ export default defineComponent({
                 fill: var(--link-color);
             }
 
-            #{$this}__icon--acorn path {
-                stroke: var(--link-color);
+            #{$this}__icon--acorn{
+                filter: grayscale(0);
             }
         }
     }
@@ -521,8 +527,8 @@ export default defineComponent({
             fill: var(--link-color);
         }
 
-        &--current-route#{$this}__icon--acorn path {
-            stroke: var(--link-color);
+        &--current-route#{$this}__icon--acorn {
+            filter: grayscale(0);
         }
     }
 

src/components/evm/UserInfo.vue

@@ -105,13 +105,15 @@ export default defineComponent({
                     @click="gotoTeloscan()"
                     @keypress.space.enter="gotoTeloscan()"
                 >
-                    <div class="c-user-info__icon-wrapper"><InlineSvg
-                        :src="require('src/assets/icon--acorn.svg')"
-                        class="c-user-info__icon c-user-info__icon--acorn"
-                        height="24"
-                        width="24"
-                        aria-hidden="true"
-                    /></div>
+                    <div class="c-user-info__icon-wrapper">
+                        <img
+                            src="/branding/telos-scan.png"
+                            class="c-user-info__icon c-user-info__icon--acorn"
+                            height="24"
+                            width="24"
+                            aria-hidden="true"
+                        >
+                    </div>
                     <h5>{{ $t('nav.teloscan') }}</h5>
                     <q-icon size="xs" name="o_launch" class="c-user-info__menu-item-min-icon" />
                 </li>
@@ -171,6 +173,10 @@ export default defineComponent({
         transition: background-color 0.1s ease-in-out;
         transition-property: background-color, color;
 
+        .c-user-info__icon--acorn{
+            filter: grayscale(1);
+        }
+
         &:hover {
             background-color: var(--accent-color-5);
             color: var(--accent-color);
@@ -180,8 +186,8 @@ export default defineComponent({
                     fill: var(--accent-color);
                 }
 
-                &#{$this}__icon--acorn path {
-                    stroke: var(--accent-color);
+                &#{$this}__icon--acorn {
+                    filter: grayscale(0);
                 }
             }
         }

src/components/native/NavBar.vue

@@ -128,7 +128,7 @@ export default {
 <template>
 <div>
     <nav class="leftNavBar">
-        <img src="~assets/telosLogo.svg" class="telosLogo" >
+        <img src="/branding/telos-wallet-light.png" class="telosLogo" >
         <ul>
             <li>
                 <a @click="switchTab('coins')"> <img :src="srcWallet" >{{$t('navbar.wallet')}} </a>

src/css/_legacy-styles.scss

@@ -49,6 +49,7 @@ div.cleos-auth-dialog {
 @media only screen and (min-width: 1000px) {
   .telosLogo {
     padding: 2.5em 5em 0.875em 4em;
+    width: 240px;
   }
 
   .container {

src/index.template.html

@@ -10,10 +10,10 @@
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
     <meta name="google-signin-client_id" content="384227958745-a6f2j8rqcabpk0n8jkr56nqt2bbg9juv.apps.googleusercontent.com">
 
-    <link rel="icon" type="image/png" sizes="512x512" href="icons/favicon-512x512.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="icons/favicon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="512x512" href='branding/android-chrome-512x512.png'>
+    <link rel="icon" type="image/png" sizes="192x192" href='branding/android-chrome-192x192.png'>
+    <link rel="icon" type="image/png" sizes="32x32" href="branding/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="branding/favicon-16x16.png">
     <link rel="icon" type="image/ico" href="favicon.ico">
   </head>
   <body>

src/pages/Error404Page.vue

@@ -36,7 +36,7 @@ export default defineComponent({
             <div class="c-404-page__layout-logo">
                 <img
                     class="c-404-page__logo"
-                    src="~assets/logo--telos-wallet.svg"
+                    src="branding/telos-wallet-light.png"
                     :alt="$t('home.wallet_logo_alt')"
                     :aria-label="$t('nav.go_home')"
                 >

src/pages/evm/nfts/NftInventoryPage.vue

@@ -25,11 +25,7 @@ const chainStore = useChainStore();
 const accountStore = useAccountStore();
 const chainSettings = (chainStore.currentChain.settings as EVMChainSettings);
 
-//TODO: remove timeout, see https://github.com/telosnetwork/telos-wallet/issues/697
-setTimeout(() => {
-    // This warns the user (once per session) that the indexer is not healthy and can be outdated data
-    chainSettings.checkAndWarnIndexerHealth();
-}, 1000);
+chainSettings.checkAndWarnIndexerHealth();
 
 const router = useRouter();
 const route = useRoute();

src/pages/evm/wallet/WalletBalanceRow.vue

@@ -41,7 +41,7 @@ export default defineComponent({
             if (this.token.logoURI) {
                 return this.token.logoURI;
             } else {
-                return require('src/assets/logo--tlos.svg');
+                return require('src/assets/tokens/telos.png');
             }
         },
         grayLogo(): boolean {