From eed64ff17351ead09cff893ac76e3cb69b262005 Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Wed, 9 Aug 2023 21:48:18 -0500
Subject: [PATCH 001/268] fix: check available ram, update notification

---
 src/i18n/en-us/index.js                 | 1 +
 src/pages/native/balance/DepositEVM.vue | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 4378d6c5f..0b2055afe 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -215,6 +215,7 @@ export default {
         add: 'Add',
         buying_resources: 'Buying Resources',
         resources_bought: 'Resources bought',
+        insufficient_ram: 'You have insufficient RAM to complete this transaction, please select "Resource Management" from the menu to view available resources',
     },
     login: {
         connect_wallet: 'Connect Wallet',
diff --git a/src/pages/native/balance/DepositEVM.vue b/src/pages/native/balance/DepositEVM.vue
index f9f264222..95aa32f54 100644
--- a/src/pages/native/balance/DepositEVM.vue
+++ b/src/pages/native/balance/DepositEVM.vue
@@ -87,6 +87,13 @@ export default {
             }
         },
         async generateAddress(){
+            debugger;
+            const accountInfo = await this.$store.$api.getAccount(this.accountName);
+
+            if (accountInfo.ram_quota - accountInfo.ram_usage <= 1000){ // If account (often newly created account) does not have sufficient RAM, notify user
+                this.$errorNotification(this.$t('resources.insufficient_ram'));
+                return;
+            }
             const actions = [];
             if (!this.evmAddress) {
                 actions.push({
@@ -169,7 +176,7 @@ export default {
         },
     },
     watch: {
-        showDepositEVMDlg() {
+        async showDepositEVMDlg() {
             if (this.showDlg) {
                 this.$emit('addEvmNetwork');
             };

From 5a10ffaf749971411d4e80c6d4ab7ef8c8e3e83a Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Wed, 9 Aug 2023 21:48:47 -0500
Subject: [PATCH 002/268] refactor: remove debugger

---
 src/pages/native/balance/DepositEVM.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/native/balance/DepositEVM.vue b/src/pages/native/balance/DepositEVM.vue
index 95aa32f54..6877ab17f 100644
--- a/src/pages/native/balance/DepositEVM.vue
+++ b/src/pages/native/balance/DepositEVM.vue
@@ -87,7 +87,6 @@ export default {
             }
         },
         async generateAddress(){
-            debugger;
             const accountInfo = await this.$store.$api.getAccount(this.accountName);
 
             if (accountInfo.ram_quota - accountInfo.ram_usage <= 1000){ // If account (often newly created account) does not have sufficient RAM, notify user

From a73710c01760238b06c4ef4d710a3f9f49f0c193 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 16:00:26 -0300
Subject: [PATCH 003/268] WIP

---
 src/components/evm/AppNav.vue               |   1 -
 src/i18n/en-us/index.js                     |   7 +
 src/pages/evm/staking/StakingPage.vue       |  22 ++-
 src/pages/evm/staking/StakingPageHeader.vue | 149 ++++++++++++++++++++
 src/router/routes.js                        |  10 +-
 5 files changed, 169 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/evm/staking/StakingPageHeader.vue

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 479ff74ce..a8b47a003 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -261,7 +261,6 @@ export default defineComponent({
             </li>
 
             <li
-                v-if="false"
                 class="c-app-nav__menu-item"
                 role="menuitem"
                 :tabindex="menuItemTabIndex"
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index f181527d5..9815d6cfb 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -189,6 +189,13 @@ export default {
         wrap_input_label: 'Wrapping Amount',
         unwrap_input_label: 'Unwrapping Amount',
     },
+    evm_stake: {
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        staked_card_label: 'Staked {symbol}',
+        staked_card_tooltip: 'Staked\n\n' +
+        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_tooltip: 'Unstaking',
+    },
     notification:{
         success_title_trx: 'Success',
         success_title_copied: 'Copied',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index c7e321c75..e5ac5b327 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -1,24 +1,14 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script setup lang="ts">
 import AppPage from 'components/evm/AppPage.vue';
+import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
 
-export default defineComponent({
-    name: 'StakingPage',
-    components: {
-        AppPage,
-    },
-    data: () => ({
-        tabs: ['stake', 'unstake', 'withdraw'],
-    }),
-
-});
+const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
 
 <template>
 <AppPage :tabs="tabs">
     <template v-slot:header>
-        <p>stake page header stuff</p>
+        <StakingPageHeader />
     </template>
 
     <template v-slot:stake>
@@ -38,3 +28,7 @@ export default defineComponent({
 <style lang="scss">
 
 </style>
+
+
+
+
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
new file mode 100644
index 000000000..3beaa0d97
--- /dev/null
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BigNumber, ethers } from 'ethers';
+
+import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
+import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { NativeCurrencyAddress } from 'src/antelope/types';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+
+import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
+
+
+const { t: $t } = useI18n();
+const userStore = useUserStore();
+const balancesStore = useBalancesStore();
+const chainStore = useChainStore();
+const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
+// data
+const systemTokenPrice = ref(0); // always equal to wrapped token price
+const loading = ref(true);
+
+
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenName = computed(() => chainSettings.getSystemToken().name);
+const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
+const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
+
+const totalFiatValueText = ref('--');
+
+/*
+const totalFiatValueText = computed(() => {
+    if (loading.value) {
+        return '--';
+    }
+
+    const totalBalance = +totalSystemAndWrappedBalance.value;
+    const totalFiatValue = totalBalance * systemTokenPrice.value;
+
+    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
+});
+
+
+const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
+const allBalances = computed(() => balancesStore.loggedBalances);
+const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
+const wrappedTokenBalanceBn = computed(() =>
+    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
+);
+const totalSystemAndWrappedBalance = computed(() => {
+    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
+        return '0';
+    }
+    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
+
+    return formatWei(addedBn, WEI_PRECISION);
+});
+const totalBalanceUnitsText = computed(() => {
+    const systemSymbol = chainSettings.getSystemToken().symbol;
+    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+
+    return `${systemSymbol} + ${wrappedSymbol}`;
+});
+const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const wrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
+*/
+
+const stakedFiatValueText = ref('--');
+const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
+const unstakingFiatValueText = ref('--');
+const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
+
+const cardData = computed(() => [{
+    label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    primaryText: stakedFiatValueText.value,
+    secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}]);
+
+
+// methods
+onBeforeMount(() => {
+    chainSettings.getUsdPrice().then((price) => {
+        systemTokenPrice.value = price;
+    }).finally(() => {
+        loading.value = false;
+    });
+});
+
+function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
+    return prettyPrintCurrency(
+        amount ?? BigNumber.from(0),
+        4,
+        fiatLocale.value,
+        false,
+        symbol,
+        false,
+        WEI_PRECISION,
+    );
+}
+</script>
+
+<template>
+<div class="c-staking-header">
+    <div class="text-center q-mb-xl">
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemTokenName }) }}</h5>
+        <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
+    </div>
+
+    <ScrollableInfoCards :cards="cardData" />
+</div>
+</template>
+
+<style lang="scss">
+.c-staking-header {
+    width: 100%;
+}
+</style>
diff --git a/src/router/routes.js b/src/router/routes.js
index d3ef44561..13a7883be 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -69,11 +69,11 @@ const routes = [
                 },
                 component: () => import('pages/evm/nfts/NftDetailsPage.vue'),
             },
-            // {
-            //     path: 'staking',
-            //     name: 'evm-staking',
-            //     component: () => import('pages/evm/staking/StakingPage.vue'),
-            // },
+            {
+                path: 'staking',
+                name: 'evm-staking',
+                component: () => import('pages/evm/staking/StakingPage.vue'),
+            },
             {
                 path: 'wrap',
                 name: 'evm-wrap',

From a89081112c3bd5a909e2f931e13dd14ee3cbb998 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 004/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue               |  10 ++
 src/components/evm/ScrollableInfoCards.vue  |  14 ++-
 src/i18n/en-us/index.js                     |  31 +++++-
 src/pages/evm/staking/StakingPageHeader.vue | 111 +++++++++-----------
 4 files changed, 98 insertions(+), 68 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index a8b47a003..2be56ab14 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,6 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
+                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
             </li>
 
             <li
@@ -481,6 +482,15 @@ export default defineComponent({
         }
     }
 
+    &__apy-box {
+        @include text--small;
+        background-color: rgba(255, 255, 255, 0.1);
+        color: var(--bg-color);
+        padding: 4px 8px;
+        border-radius: 4px;
+        display: inline-block;
+    }
+
     &__icon {
         // svg color overrides
         &--current-route:not(#{$this}__icon--acorn) path {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 591334a9a..1b10f0552 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -8,13 +8,21 @@ const props = defineProps<{
         primaryText?: string;
         secondaryText?: string;
         lowContrastSecondaryText?: boolean;
+        useSmallBox?: boolean;
     }[];
 }>();
 </script>
 
 <template>
 <div class="c-scrollable-info-cards">
-    <div v-for="(card, index) in cards" :key="`card-${index}`" class="c-scrollable-info-cards__card">
+    <div
+        v-for="(card, index) in cards"
+        :key="`card-${index}`"
+        :class="{
+            'c-scrollable-info-cards__card': true,
+            'c-scrollable-info-cards__card--small': !!card.useSmallBox,
+        }"
+    >
         <div class="c-scrollable-info-cards__card-header">
             <h5 class="u-text--low-contrast">
                 {{ card.label }}
@@ -66,9 +74,11 @@ const props = defineProps<{
         border: 2px solid var(--header-item-outline-color);
         width: 220px;
         flex-shrink: 0;
-
         @include sm-and-up {
             width: 300px;
+            &--small {
+                width: 220px;
+            }
         }
     }
 
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 9815d6cfb..afb5551f2 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -192,9 +192,34 @@ export default {
     evm_stake: {
         total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
         staked_card_label: 'Staked {symbol}',
-        staked_card_tooltip: 'Staked\n\n' +
-        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
-        unstaking_card_tooltip: 'Unstaking',
+        staked_card_tooltip: 'Staked tokens:\n\n' +
+        'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
+        'This includes your {stakedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_label: 'Unstaking',
+        unstaking_card_tooltip: 'Unstaking tokens:\n\n' +
+        'This reflects the total value of locked {systemSymbol} in the process of unstaking.\n' +
+        'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
+        'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
+        'During this time you cannot interact with this {systemSymbol}.',
+        withdrawable_card_label: 'Withdraw-able',
+        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
+        'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
+        'you can withdraw your {systemSymbol} from escrow.',
+        apy_card_label: 'APY',
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
+        'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
+        'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
+        'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
+        unstaking_period_card_label: 'Unstaking Period',
+        unstaking_period_card_tooltip: 'Unstaking Period:\n\n' +
+        'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
+        'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
+        tvl_card_label: 'TVL',
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 3beaa0d97..52b4b682d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -29,83 +29,63 @@ const systemTokenName = computed(() => chainSettings.getSystemToken().name);
 const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
 const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
 
-const totalFiatValueText = ref('--');
+const totalFiatValueText = ref('$ 4,324.35');
 
-/*
-const totalFiatValueText = computed(() => {
-    if (loading.value) {
-        return '--';
-    }
-
-    const totalBalance = +totalSystemAndWrappedBalance.value;
-    const totalFiatValue = totalBalance * systemTokenPrice.value;
-
-    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
-});
+const stakedFiatValueText = ref('$ 4,000.23');
+const stakedTokenBalanceBn = ref(ethers.utils.parseUnits('34021.230', WEI_PRECISION));
+const unstakingFiatValueText = ref('$ 200.72');
+const unstakingBalanceBn = ref(ethers.utils.parseUnits('1242.0312', WEI_PRECISION));
+const withdrawableFiatValueText = ref('$ 123.02');
+const withdrawableBalanceBn = ref(ethers.utils.parseUnits('245.0225', WEI_PRECISION));
 
+const apyPrittyPrint = ref('8.23%');
+const unlockPeriod = ref('10 days');
 
-const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
-const allBalances = computed(() => balancesStore.loggedBalances);
-const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
-const wrappedTokenBalanceBn = computed(() =>
-    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
-);
-const totalSystemAndWrappedBalance = computed(() => {
-    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
-        return '0';
-    }
-    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
-
-    return formatWei(addedBn, WEI_PRECISION);
-});
-const totalBalanceUnitsText = computed(() => {
-    const systemSymbol = chainSettings.getSystemToken().symbol;
-    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
+const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
+const evmNetworkName = ref('Telos EVM');
 
-    return `${systemSymbol} + ${wrappedSymbol}`;
-});
-const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const wrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
-*/
-
-const stakedFiatValueText = ref('--');
-const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
-const unstakingFiatValueText = ref('--');
-const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
-
-const cardData = computed(() => [{
+const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
     tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
     primaryText: stakedFiatValueText.value,
     secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    label: $t('evm_stake.unstaking_card_label'),
+    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
     primaryText: unstakingFiatValueText.value,
     secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
-    primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    label: $t('evm_stake.withdrawable_card_label'),
+    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    primaryText: withdrawableFiatValueText.value,
+    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
+}]);
+
+const secondLineData = computed(() => [{
+    label: $t('evm_stake.apy_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: apyPrittyPrint.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.unstaking_period_card_label'),
+    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: unlockPeriod.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.tvl_card_label'),
+    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: prettyPrintToken(tvlAmountBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
 }]);
 
 
@@ -138,12 +118,17 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 
-    <ScrollableInfoCards :cards="cardData" />
+    <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
+    <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>
 </template>
 
 <style lang="scss">
 .c-staking-header {
     width: 100%;
+
+    &__cards-second-line {
+        margin-top: 24px;
+    }
 }
 </style>

From 1972b3328f06c8fd3a811c60f7ace12c17b59dfa Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 005/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index afb5551f2..14088ecf0 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 47617c835d6bf2480b356abb6cc80ed2932d4965 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:10:04 -0400
Subject: [PATCH 006/268] use i18n for apy label

---
 src/components/evm/AppNav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 2be56ab14..9fb48b9c9 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,7 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
+                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
             </li>
 
             <li

From 6e0e11824289d7e1f840355b88b25737e0959fe2 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 16:00:26 -0300
Subject: [PATCH 007/268] WIP

---
 src/components/evm/AppNav.vue               |   1 -
 src/i18n/en-us/index.js                     |   7 +
 src/pages/evm/staking/StakingPage.vue       |  22 ++-
 src/pages/evm/staking/StakingPageHeader.vue | 149 ++++++++++++++++++++
 src/router/routes.js                        |  10 +-
 5 files changed, 169 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/evm/staking/StakingPageHeader.vue

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 479ff74ce..a8b47a003 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -261,7 +261,6 @@ export default defineComponent({
             </li>
 
             <li
-                v-if="false"
                 class="c-app-nav__menu-item"
                 role="menuitem"
                 :tabindex="menuItemTabIndex"
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index f181527d5..9815d6cfb 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -189,6 +189,13 @@ export default {
         wrap_input_label: 'Wrapping Amount',
         unwrap_input_label: 'Unwrapping Amount',
     },
+    evm_stake: {
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        staked_card_label: 'Staked {symbol}',
+        staked_card_tooltip: 'Staked\n\n' +
+        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_tooltip: 'Unstaking',
+    },
     notification:{
         success_title_trx: 'Success',
         success_title_copied: 'Copied',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index c7e321c75..e5ac5b327 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -1,24 +1,14 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script setup lang="ts">
 import AppPage from 'components/evm/AppPage.vue';
+import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
 
-export default defineComponent({
-    name: 'StakingPage',
-    components: {
-        AppPage,
-    },
-    data: () => ({
-        tabs: ['stake', 'unstake', 'withdraw'],
-    }),
-
-});
+const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
 
 <template>
 <AppPage :tabs="tabs">
     <template v-slot:header>
-        <p>stake page header stuff</p>
+        <StakingPageHeader />
     </template>
 
     <template v-slot:stake>
@@ -38,3 +28,7 @@ export default defineComponent({
 <style lang="scss">
 
 </style>
+
+
+
+
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
new file mode 100644
index 000000000..3beaa0d97
--- /dev/null
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BigNumber, ethers } from 'ethers';
+
+import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
+import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { NativeCurrencyAddress } from 'src/antelope/types';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+
+import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
+
+
+const { t: $t } = useI18n();
+const userStore = useUserStore();
+const balancesStore = useBalancesStore();
+const chainStore = useChainStore();
+const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
+// data
+const systemTokenPrice = ref(0); // always equal to wrapped token price
+const loading = ref(true);
+
+
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenName = computed(() => chainSettings.getSystemToken().name);
+const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
+const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
+
+const totalFiatValueText = ref('--');
+
+/*
+const totalFiatValueText = computed(() => {
+    if (loading.value) {
+        return '--';
+    }
+
+    const totalBalance = +totalSystemAndWrappedBalance.value;
+    const totalFiatValue = totalBalance * systemTokenPrice.value;
+
+    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
+});
+
+
+const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
+const allBalances = computed(() => balancesStore.loggedBalances);
+const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
+const wrappedTokenBalanceBn = computed(() =>
+    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
+);
+const totalSystemAndWrappedBalance = computed(() => {
+    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
+        return '0';
+    }
+    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
+
+    return formatWei(addedBn, WEI_PRECISION);
+});
+const totalBalanceUnitsText = computed(() => {
+    const systemSymbol = chainSettings.getSystemToken().symbol;
+    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+
+    return `${systemSymbol} + ${wrappedSymbol}`;
+});
+const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const wrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
+*/
+
+const stakedFiatValueText = ref('--');
+const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
+const unstakingFiatValueText = ref('--');
+const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
+
+const cardData = computed(() => [{
+    label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    primaryText: stakedFiatValueText.value,
+    secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}]);
+
+
+// methods
+onBeforeMount(() => {
+    chainSettings.getUsdPrice().then((price) => {
+        systemTokenPrice.value = price;
+    }).finally(() => {
+        loading.value = false;
+    });
+});
+
+function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
+    return prettyPrintCurrency(
+        amount ?? BigNumber.from(0),
+        4,
+        fiatLocale.value,
+        false,
+        symbol,
+        false,
+        WEI_PRECISION,
+    );
+}
+</script>
+
+<template>
+<div class="c-staking-header">
+    <div class="text-center q-mb-xl">
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemTokenName }) }}</h5>
+        <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
+    </div>
+
+    <ScrollableInfoCards :cards="cardData" />
+</div>
+</template>
+
+<style lang="scss">
+.c-staking-header {
+    width: 100%;
+}
+</style>
diff --git a/src/router/routes.js b/src/router/routes.js
index d3ef44561..13a7883be 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -69,11 +69,11 @@ const routes = [
                 },
                 component: () => import('pages/evm/nfts/NftDetailsPage.vue'),
             },
-            // {
-            //     path: 'staking',
-            //     name: 'evm-staking',
-            //     component: () => import('pages/evm/staking/StakingPage.vue'),
-            // },
+            {
+                path: 'staking',
+                name: 'evm-staking',
+                component: () => import('pages/evm/staking/StakingPage.vue'),
+            },
             {
                 path: 'wrap',
                 name: 'evm-wrap',

From f6d13353611f3a9b8a3a48e51f77c16fb4622db8 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 008/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue               |  10 ++
 src/components/evm/ScrollableInfoCards.vue  |  14 ++-
 src/i18n/en-us/index.js                     |  31 +++++-
 src/pages/evm/staking/StakingPageHeader.vue | 111 +++++++++-----------
 4 files changed, 98 insertions(+), 68 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index a8b47a003..2be56ab14 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,6 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
+                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
             </li>
 
             <li
@@ -481,6 +482,15 @@ export default defineComponent({
         }
     }
 
+    &__apy-box {
+        @include text--small;
+        background-color: rgba(255, 255, 255, 0.1);
+        color: var(--bg-color);
+        padding: 4px 8px;
+        border-radius: 4px;
+        display: inline-block;
+    }
+
     &__icon {
         // svg color overrides
         &--current-route:not(#{$this}__icon--acorn) path {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 591334a9a..1b10f0552 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -8,13 +8,21 @@ const props = defineProps<{
         primaryText?: string;
         secondaryText?: string;
         lowContrastSecondaryText?: boolean;
+        useSmallBox?: boolean;
     }[];
 }>();
 </script>
 
 <template>
 <div class="c-scrollable-info-cards">
-    <div v-for="(card, index) in cards" :key="`card-${index}`" class="c-scrollable-info-cards__card">
+    <div
+        v-for="(card, index) in cards"
+        :key="`card-${index}`"
+        :class="{
+            'c-scrollable-info-cards__card': true,
+            'c-scrollable-info-cards__card--small': !!card.useSmallBox,
+        }"
+    >
         <div class="c-scrollable-info-cards__card-header">
             <h5 class="u-text--low-contrast">
                 {{ card.label }}
@@ -66,9 +74,11 @@ const props = defineProps<{
         border: 2px solid var(--header-item-outline-color);
         width: 220px;
         flex-shrink: 0;
-
         @include sm-and-up {
             width: 300px;
+            &--small {
+                width: 220px;
+            }
         }
     }
 
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 9815d6cfb..afb5551f2 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -192,9 +192,34 @@ export default {
     evm_stake: {
         total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
         staked_card_label: 'Staked {symbol}',
-        staked_card_tooltip: 'Staked\n\n' +
-        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
-        unstaking_card_tooltip: 'Unstaking',
+        staked_card_tooltip: 'Staked tokens:\n\n' +
+        'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
+        'This includes your {stakedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_label: 'Unstaking',
+        unstaking_card_tooltip: 'Unstaking tokens:\n\n' +
+        'This reflects the total value of locked {systemSymbol} in the process of unstaking.\n' +
+        'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
+        'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
+        'During this time you cannot interact with this {systemSymbol}.',
+        withdrawable_card_label: 'Withdraw-able',
+        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
+        'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
+        'you can withdraw your {systemSymbol} from escrow.',
+        apy_card_label: 'APY',
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
+        'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
+        'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
+        'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
+        unstaking_period_card_label: 'Unstaking Period',
+        unstaking_period_card_tooltip: 'Unstaking Period:\n\n' +
+        'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
+        'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
+        tvl_card_label: 'TVL',
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 3beaa0d97..52b4b682d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -29,83 +29,63 @@ const systemTokenName = computed(() => chainSettings.getSystemToken().name);
 const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
 const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
 
-const totalFiatValueText = ref('--');
+const totalFiatValueText = ref('$ 4,324.35');
 
-/*
-const totalFiatValueText = computed(() => {
-    if (loading.value) {
-        return '--';
-    }
-
-    const totalBalance = +totalSystemAndWrappedBalance.value;
-    const totalFiatValue = totalBalance * systemTokenPrice.value;
-
-    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
-});
+const stakedFiatValueText = ref('$ 4,000.23');
+const stakedTokenBalanceBn = ref(ethers.utils.parseUnits('34021.230', WEI_PRECISION));
+const unstakingFiatValueText = ref('$ 200.72');
+const unstakingBalanceBn = ref(ethers.utils.parseUnits('1242.0312', WEI_PRECISION));
+const withdrawableFiatValueText = ref('$ 123.02');
+const withdrawableBalanceBn = ref(ethers.utils.parseUnits('245.0225', WEI_PRECISION));
 
+const apyPrittyPrint = ref('8.23%');
+const unlockPeriod = ref('10 days');
 
-const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
-const allBalances = computed(() => balancesStore.loggedBalances);
-const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
-const wrappedTokenBalanceBn = computed(() =>
-    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
-);
-const totalSystemAndWrappedBalance = computed(() => {
-    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
-        return '0';
-    }
-    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
-
-    return formatWei(addedBn, WEI_PRECISION);
-});
-const totalBalanceUnitsText = computed(() => {
-    const systemSymbol = chainSettings.getSystemToken().symbol;
-    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
+const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
+const evmNetworkName = ref('Telos EVM');
 
-    return `${systemSymbol} + ${wrappedSymbol}`;
-});
-const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const wrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
-*/
-
-const stakedFiatValueText = ref('--');
-const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
-const unstakingFiatValueText = ref('--');
-const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
-
-const cardData = computed(() => [{
+const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
     tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
     primaryText: stakedFiatValueText.value,
     secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    label: $t('evm_stake.unstaking_card_label'),
+    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
     primaryText: unstakingFiatValueText.value,
     secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
-    primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    label: $t('evm_stake.withdrawable_card_label'),
+    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    primaryText: withdrawableFiatValueText.value,
+    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
+}]);
+
+const secondLineData = computed(() => [{
+    label: $t('evm_stake.apy_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: apyPrittyPrint.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.unstaking_period_card_label'),
+    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: unlockPeriod.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.tvl_card_label'),
+    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: prettyPrintToken(tvlAmountBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
 }]);
 
 
@@ -138,12 +118,17 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 
-    <ScrollableInfoCards :cards="cardData" />
+    <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
+    <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>
 </template>
 
 <style lang="scss">
 .c-staking-header {
     width: 100%;
+
+    &__cards-second-line {
+        margin-top: 24px;
+    }
 }
 </style>

From 1dab364397114f2a51194a6c52d3421683c2390c Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 009/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index afb5551f2..14088ecf0 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 94e193eb1003fff6cf60b12c18c6a2588d4cbcf8 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:10:04 -0400
Subject: [PATCH 010/268] use i18n for apy label

---
 src/components/evm/AppNav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 2be56ab14..9fb48b9c9 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,7 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
+                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
             </li>
 
             <li

From 5fc446bbd8ba10d45f737cacd44f088fdfed8640 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 16:00:26 -0300
Subject: [PATCH 011/268] WIP

---
 src/components/evm/AppNav.vue               |   1 -
 src/i18n/en-us/index.js                     |   7 +
 src/pages/evm/staking/StakingPage.vue       |  22 ++-
 src/pages/evm/staking/StakingPageHeader.vue | 149 ++++++++++++++++++++
 src/router/routes.js                        |  10 +-
 5 files changed, 169 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/evm/staking/StakingPageHeader.vue

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 479ff74ce..a8b47a003 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -261,7 +261,6 @@ export default defineComponent({
             </li>
 
             <li
-                v-if="false"
                 class="c-app-nav__menu-item"
                 role="menuitem"
                 :tabindex="menuItemTabIndex"
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index f181527d5..9815d6cfb 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -189,6 +189,13 @@ export default {
         wrap_input_label: 'Wrapping Amount',
         unwrap_input_label: 'Unwrapping Amount',
     },
+    evm_stake: {
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        staked_card_label: 'Staked {symbol}',
+        staked_card_tooltip: 'Staked\n\n' +
+        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_tooltip: 'Unstaking',
+    },
     notification:{
         success_title_trx: 'Success',
         success_title_copied: 'Copied',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index c7e321c75..e5ac5b327 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -1,24 +1,14 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script setup lang="ts">
 import AppPage from 'components/evm/AppPage.vue';
+import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
 
-export default defineComponent({
-    name: 'StakingPage',
-    components: {
-        AppPage,
-    },
-    data: () => ({
-        tabs: ['stake', 'unstake', 'withdraw'],
-    }),
-
-});
+const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
 
 <template>
 <AppPage :tabs="tabs">
     <template v-slot:header>
-        <p>stake page header stuff</p>
+        <StakingPageHeader />
     </template>
 
     <template v-slot:stake>
@@ -38,3 +28,7 @@ export default defineComponent({
 <style lang="scss">
 
 </style>
+
+
+
+
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
new file mode 100644
index 000000000..3beaa0d97
--- /dev/null
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BigNumber, ethers } from 'ethers';
+
+import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
+import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { NativeCurrencyAddress } from 'src/antelope/types';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+
+import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
+
+
+const { t: $t } = useI18n();
+const userStore = useUserStore();
+const balancesStore = useBalancesStore();
+const chainStore = useChainStore();
+const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
+// data
+const systemTokenPrice = ref(0); // always equal to wrapped token price
+const loading = ref(true);
+
+
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenName = computed(() => chainSettings.getSystemToken().name);
+const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
+const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
+
+const totalFiatValueText = ref('--');
+
+/*
+const totalFiatValueText = computed(() => {
+    if (loading.value) {
+        return '--';
+    }
+
+    const totalBalance = +totalSystemAndWrappedBalance.value;
+    const totalFiatValue = totalBalance * systemTokenPrice.value;
+
+    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
+});
+
+
+const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
+const allBalances = computed(() => balancesStore.loggedBalances);
+const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
+const wrappedTokenBalanceBn = computed(() =>
+    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
+);
+const totalSystemAndWrappedBalance = computed(() => {
+    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
+        return '0';
+    }
+    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
+
+    return formatWei(addedBn, WEI_PRECISION);
+});
+const totalBalanceUnitsText = computed(() => {
+    const systemSymbol = chainSettings.getSystemToken().symbol;
+    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+
+    return `${systemSymbol} + ${wrappedSymbol}`;
+});
+const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const wrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
+*/
+
+const stakedFiatValueText = ref('--');
+const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
+const unstakingFiatValueText = ref('--');
+const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
+
+const cardData = computed(() => [{
+    label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    primaryText: stakedFiatValueText.value,
+    secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}]);
+
+
+// methods
+onBeforeMount(() => {
+    chainSettings.getUsdPrice().then((price) => {
+        systemTokenPrice.value = price;
+    }).finally(() => {
+        loading.value = false;
+    });
+});
+
+function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
+    return prettyPrintCurrency(
+        amount ?? BigNumber.from(0),
+        4,
+        fiatLocale.value,
+        false,
+        symbol,
+        false,
+        WEI_PRECISION,
+    );
+}
+</script>
+
+<template>
+<div class="c-staking-header">
+    <div class="text-center q-mb-xl">
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemTokenName }) }}</h5>
+        <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
+    </div>
+
+    <ScrollableInfoCards :cards="cardData" />
+</div>
+</template>
+
+<style lang="scss">
+.c-staking-header {
+    width: 100%;
+}
+</style>
diff --git a/src/router/routes.js b/src/router/routes.js
index 4d99cdc2c..2c700f75b 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -72,11 +72,11 @@ const routes = [
                 },
                 component: () => import('pages/evm/nfts/NftDetailsPage.vue'),
             },
-            // {
-            //     path: 'staking',
-            //     name: 'evm-staking',
-            //     component: () => import('pages/evm/staking/StakingPage.vue'),
-            // },
+            {
+                path: 'staking',
+                name: 'evm-staking',
+                component: () => import('pages/evm/staking/StakingPage.vue'),
+            },
             {
                 path: 'wrap',
                 name: 'evm-wrap',

From f4c3d97ac9d109bf09019fe50b7fd175aba74df7 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 012/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue               |  10 ++
 src/components/evm/ScrollableInfoCards.vue  |  14 ++-
 src/i18n/en-us/index.js                     |  31 +++++-
 src/pages/evm/staking/StakingPageHeader.vue | 111 +++++++++-----------
 4 files changed, 98 insertions(+), 68 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index a8b47a003..2be56ab14 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,6 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
+                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
             </li>
 
             <li
@@ -481,6 +482,15 @@ export default defineComponent({
         }
     }
 
+    &__apy-box {
+        @include text--small;
+        background-color: rgba(255, 255, 255, 0.1);
+        color: var(--bg-color);
+        padding: 4px 8px;
+        border-radius: 4px;
+        display: inline-block;
+    }
+
     &__icon {
         // svg color overrides
         &--current-route:not(#{$this}__icon--acorn) path {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 591334a9a..1b10f0552 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -8,13 +8,21 @@ const props = defineProps<{
         primaryText?: string;
         secondaryText?: string;
         lowContrastSecondaryText?: boolean;
+        useSmallBox?: boolean;
     }[];
 }>();
 </script>
 
 <template>
 <div class="c-scrollable-info-cards">
-    <div v-for="(card, index) in cards" :key="`card-${index}`" class="c-scrollable-info-cards__card">
+    <div
+        v-for="(card, index) in cards"
+        :key="`card-${index}`"
+        :class="{
+            'c-scrollable-info-cards__card': true,
+            'c-scrollable-info-cards__card--small': !!card.useSmallBox,
+        }"
+    >
         <div class="c-scrollable-info-cards__card-header">
             <h5 class="u-text--low-contrast">
                 {{ card.label }}
@@ -66,9 +74,11 @@ const props = defineProps<{
         border: 2px solid var(--header-item-outline-color);
         width: 220px;
         flex-shrink: 0;
-
         @include sm-and-up {
             width: 300px;
+            &--small {
+                width: 220px;
+            }
         }
     }
 
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 9815d6cfb..afb5551f2 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -192,9 +192,34 @@ export default {
     evm_stake: {
         total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
         staked_card_label: 'Staked {symbol}',
-        staked_card_tooltip: 'Staked\n\n' +
-        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
-        unstaking_card_tooltip: 'Unstaking',
+        staked_card_tooltip: 'Staked tokens:\n\n' +
+        'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
+        'This includes your {stakedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_label: 'Unstaking',
+        unstaking_card_tooltip: 'Unstaking tokens:\n\n' +
+        'This reflects the total value of locked {systemSymbol} in the process of unstaking.\n' +
+        'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
+        'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
+        'During this time you cannot interact with this {systemSymbol}.',
+        withdrawable_card_label: 'Withdraw-able',
+        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
+        'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
+        'you can withdraw your {systemSymbol} from escrow.',
+        apy_card_label: 'APY',
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
+        'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
+        'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
+        'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
+        unstaking_period_card_label: 'Unstaking Period',
+        unstaking_period_card_tooltip: 'Unstaking Period:\n\n' +
+        'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
+        'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
+        tvl_card_label: 'TVL',
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 3beaa0d97..52b4b682d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -29,83 +29,63 @@ const systemTokenName = computed(() => chainSettings.getSystemToken().name);
 const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
 const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
 
-const totalFiatValueText = ref('--');
+const totalFiatValueText = ref('$ 4,324.35');
 
-/*
-const totalFiatValueText = computed(() => {
-    if (loading.value) {
-        return '--';
-    }
-
-    const totalBalance = +totalSystemAndWrappedBalance.value;
-    const totalFiatValue = totalBalance * systemTokenPrice.value;
-
-    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
-});
+const stakedFiatValueText = ref('$ 4,000.23');
+const stakedTokenBalanceBn = ref(ethers.utils.parseUnits('34021.230', WEI_PRECISION));
+const unstakingFiatValueText = ref('$ 200.72');
+const unstakingBalanceBn = ref(ethers.utils.parseUnits('1242.0312', WEI_PRECISION));
+const withdrawableFiatValueText = ref('$ 123.02');
+const withdrawableBalanceBn = ref(ethers.utils.parseUnits('245.0225', WEI_PRECISION));
 
+const apyPrittyPrint = ref('8.23%');
+const unlockPeriod = ref('10 days');
 
-const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
-const allBalances = computed(() => balancesStore.loggedBalances);
-const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
-const wrappedTokenBalanceBn = computed(() =>
-    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
-);
-const totalSystemAndWrappedBalance = computed(() => {
-    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
-        return '0';
-    }
-    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
-
-    return formatWei(addedBn, WEI_PRECISION);
-});
-const totalBalanceUnitsText = computed(() => {
-    const systemSymbol = chainSettings.getSystemToken().symbol;
-    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
+const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
+const evmNetworkName = ref('Telos EVM');
 
-    return `${systemSymbol} + ${wrappedSymbol}`;
-});
-const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const wrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
-*/
-
-const stakedFiatValueText = ref('--');
-const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
-const unstakingFiatValueText = ref('--');
-const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
-
-const cardData = computed(() => [{
+const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
     tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
     primaryText: stakedFiatValueText.value,
     secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    label: $t('evm_stake.unstaking_card_label'),
+    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
     primaryText: unstakingFiatValueText.value,
     secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
-    primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    label: $t('evm_stake.withdrawable_card_label'),
+    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    primaryText: withdrawableFiatValueText.value,
+    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
+}]);
+
+const secondLineData = computed(() => [{
+    label: $t('evm_stake.apy_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: apyPrittyPrint.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.unstaking_period_card_label'),
+    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: unlockPeriod.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.tvl_card_label'),
+    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: prettyPrintToken(tvlAmountBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
 }]);
 
 
@@ -138,12 +118,17 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 
-    <ScrollableInfoCards :cards="cardData" />
+    <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
+    <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>
 </template>
 
 <style lang="scss">
 .c-staking-header {
     width: 100%;
+
+    &__cards-second-line {
+        margin-top: 24px;
+    }
 }
 </style>

From d053f66a764230d0219c3c83af4964ab3e725190 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 013/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index afb5551f2..14088ecf0 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From e7b1c31c074b76d0ef38ae37d421f36b83e57118 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:10:04 -0400
Subject: [PATCH 014/268] use i18n for apy label

---
 src/components/evm/AppNav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 2be56ab14..9fb48b9c9 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,7 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
+                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
             </li>
 
             <li

From 3c404511ba908a1c43c69378162edcbe45a65c08 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 015/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue | 4 ++++
 src/i18n/en-us/index.js       | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 9fb48b9c9..fe9b79a2b 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,7 +279,11 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
+<<<<<<< HEAD
                 <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
+=======
+                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
+>>>>>>> a8908111 (adding page header component for Staking Section)
             </li>
 
             <li
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 14088ecf0..afb5551f2 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 85834c5a0753fd8e77cf99137144ffa297714c87 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 016/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index afb5551f2..14088ecf0 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 2c3a1655d789f20edccf98fe6bf6048ec8e54f4c Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:10:04 -0400
Subject: [PATCH 017/268] use i18n for apy label

---
 src/components/evm/AppNav.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index fe9b79a2b..9fb48b9c9 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,11 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-<<<<<<< HEAD
                 <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
-=======
-                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
->>>>>>> a8908111 (adding page header component for Staking Section)
             </li>
 
             <li

From f2e3f13f23bcd2bc76f0a776ca0aaa276c9185fc Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 22 Aug 2023 16:38:41 -0300
Subject: [PATCH 018/268] saving WIP

---
 src/antelope/chains/EVMChainSettings.ts       | 47 ++++++++--
 .../chains/evm/telos-evm-testnet/index.ts     |  5 ++
 src/antelope/chains/evm/telos-evm/index.ts    |  5 ++
 src/antelope/stores/balances.ts               | 37 ++++----
 src/antelope/stores/chain.ts                  | 71 ++++++++++++++--
 src/antelope/stores/evm.ts                    | 20 +++--
 src/antelope/types/ChainSettings.ts           |  3 +
 src/antelope/wallets/index.ts                 |  2 +-
 src/components/evm/AppNav.vue                 | 27 +++++-
 src/components/evm/ScrollableInfoCards.vue    | 28 +++++-
 src/i18n/en-us/index.js                       |  1 +
 src/pages/evm/staking/StakingPageHeader.vue   | 85 +++++++++++++------
 12 files changed, 259 insertions(+), 72 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index d09063351..45f91ee47 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -41,6 +41,9 @@ export default abstract class EVMChainSettings implements ChainSettings {
     // External query API support
     protected hyperion: AxiosInstance = axios.create({ baseURL: this.getHyperionEndpoint() });
 
+    // External query API support
+    protected api: AxiosInstance = axios.create({ baseURL: this.getApiEndpoint() });
+
     // External trusted metadata bucket for EVM contracts
     protected contractsBucket: AxiosInstance = axios.create({ baseURL: this.getTrustedContractsBucket() });
 
@@ -60,7 +63,10 @@ export default abstract class EVMChainSettings implements ChainSettings {
     tokenListPromise: Promise<TokenClass[]> | null = null;
 
     // EvmContracts cache mapped by address
-    protected contracts: Record<string, EvmContract | false> = {};
+    protected contracts: Record<string, {
+        promise: Promise<EvmContract | false>;
+        resolve?: (value: EvmContract | false) => void;
+    }> = {};
 
     constructor(network: string) {
         this.network = network;
@@ -213,6 +219,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract getDisplay(): string;
     abstract getHyperionEndpoint(): string;
     abstract getRPCEndpoint(): RpcEndpoint;
+    abstract getApiEndpoint(): string;
     abstract getPriceData(): Promise<PriceChartData>;
     abstract getUsdPrice(): Promise<number>;
     abstract getBuyMoreOfTokenLink(): string;
@@ -225,6 +232,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract hasIndexerSupport(): boolean;
     abstract trackAnalyticsEvent(params: Record<string, unknown>): void;
 
+    async getApy(): Promise<string> {
+        const response = await this.api.get('apy/evm');
+        return response.data as string;
+    }
+
     async getBalances(account: string): Promise<TokenBalance[]> {
         if (!this.hasIndexerSupport()) {
             console.error('Indexer API not supported for this chain:', this.getNetwork());
@@ -348,22 +360,47 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return `${token.symbol}-${token.address}-${this.getNetwork()}`;
     }
 
-    getContract(address: string): EvmContract | false | null {
+    async getContract(address: string): Promise<EvmContract | false | null> {
         const key = address.toLowerCase();
-        return this.contracts[key] ?? null;
+        const returnValue = this.contracts[key]?.promise ?? null;
+        if (!this.contracts[key]) {
+            this.contracts[key] = {
+                promise: Promise.resolve(false),
+            };
+            this.contracts[key].promise = new Promise((resolve) => {
+                this.contracts[key].resolve = resolve;
+            });
+        }
+        return returnValue;
     }
 
     addContract(address: string, contract: EvmContract) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
-            this.contracts[key] = contract;
+            this.contracts[key] = {
+                promise: Promise.resolve(contract),
+            };
+        } else {
+            if (this.contracts[key].resolve) {
+                this.contracts[key].resolve?.(contract);
+            } else {
+                console.error('Error: Contract already exists', address);
+            }
         }
     }
 
     setContractAsNotExisting(address: string) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
-            this.contracts[key] = false;
+            this.contracts[key] = {
+                promise: Promise.resolve(false),
+            };
+        } else {
+            if (this.contracts[key].resolve) {
+                this.contracts[key].resolve?.(false);
+            } else {
+                console.error('Error: Contract already exists', address);
+            }
         }
     }
 
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index 4c2ed6eef..20b915bfd 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -51,6 +51,7 @@ const RPC_ENDPOINT = {
     path: '/evm',
 };
 
+const API_ENDPOINT = 'https://api-dev.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://testnet.teloscan.io';
 const ECOSYSTEM_URL = 'https://www.telos.net/ecosystem';
@@ -81,6 +82,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return RPC_ENDPOINT;
     }
 
+    getApiEndpoint(): string {
+        return API_ENDPOINT;
+    }
+
     getPriceData(): Promise<PriceChartData> {
         return api.getCoingeckoPriceChartData('telos');
     }
diff --git a/src/antelope/chains/evm/telos-evm/index.ts b/src/antelope/chains/evm/telos-evm/index.ts
index c4e4acdf9..2d98d7581 100644
--- a/src/antelope/chains/evm/telos-evm/index.ts
+++ b/src/antelope/chains/evm/telos-evm/index.ts
@@ -51,6 +51,7 @@ const RPC_ENDPOINT = {
     path: '/evm',
 };
 
+const API_ENDPOINT = 'https://api.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://teloscan.io';
 const ECOSYSTEM_URL = 'https://www.telos.net/ecosystem';
@@ -81,6 +82,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return RPC_ENDPOINT;
     }
 
+    getApiEndpoint(): string {
+        return API_ENDPOINT;
+    }
+
     getPriceData(): Promise<PriceChartData> {
         return api.getCoingeckoPriceChartData('telos');
     }
diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 1463f3946..93a3ef29b 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -166,7 +166,8 @@ export const useBalancesStore = defineStore(store_name, {
             this.trace('updateSystemTokensPrices', label);
             try {
                 // take the three system tokens
-                const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
+                const chain = useChainStore();
+                const chain_settings = chain.getChain(label).settings as EVMChainSettings;
                 const sysToken = chain_settings.getSystemToken();
                 const wrpToken = chain_settings.getWrappedSystemToken();
                 const stkToken = chain_settings.getStakedSystemToken();
@@ -177,30 +178,26 @@ export const useBalancesStore = defineStore(store_name, {
                 sysToken.market = new TokenMarketData(marketInfo);
                 wrpToken.market = new TokenMarketData(marketInfo);
 
-                // first we need the contract instance to be able to execute queries
-                const evm = useEVMStore();
-                const authenticator = useAccountStore().getEVMAuthenticator(label);
-                const contract = await evm.getContract(authenticator, stkToken.address, stkToken.type);
-                if (!contract) {
-                    throw new AntelopeError('antelope.balances.error_token_contract_not_found', { address: stkToken.address });
-                }
-                const contractInstance = await contract.getContractInstance();
-
                 // Now we preview a deposit of 1 SYS to get the ratio
                 const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
-                const ratio:BigNumber = await contractInstance.previewDeposit(oneSys);
+
+                const ratio:BigNumber = await chain.getStakedRatio(label);
                 const ratioNumber = ethers.utils.formatUnits(ratio, stkToken.decimals);
 
-                // Now we calculate the price of 1 STK = (price of 1 SYS) / ratio
-                const stkPrice = convertCurrency(oneSys, sysToken.decimals, stkToken.decimals, ratioNumber);
-                const stkPriceNumber = ethers.utils.formatUnits(stkPrice, sysToken.decimals);
+                // only if the ratio is not zero, we update the STK token price
+                if (!ratio.isZero() && !ratio.isNegative()) {
 
-                // Finally we update the STK token price
-                const stkMarketInfo = { price:stkPriceNumber } as MarketSourceInfo;
-                // TODO: this is removed until we decide what to do whith the STK token price
-                // https://github.com/telosnetwork/telos-wallet/issues/544
-                // stkToken.market = new TokenMarketData(stkMarketInfo);
-                this.trace('updateSystemTokensPrices', `STLOS price: ${toRaw(stkMarketInfo)}`);
+                    // Now we calculate the price of 1 STK = (price of 1 SYS) / ratio
+                    const stkPrice = convertCurrency(oneSys, sysToken.decimals, stkToken.decimals, ratioNumber);
+                    const stkPriceNumber = ethers.utils.formatUnits(stkPrice, sysToken.decimals);
+
+                    // Finally we update the STK token price
+                    const stkMarketInfo = { price:stkPriceNumber } as MarketSourceInfo;
+                    // TODO: this is removed until we decide what to do whith the STK token price
+                    // https://github.com/telosnetwork/telos-wallet/issues/544
+                    // stkToken.market = new TokenMarketData(stkMarketInfo);
+                    this.trace('updateSystemTokensPrices', `STLOS price: ${toRaw(stkMarketInfo)}`);
+                }
 
             } catch (error) {
                 console.error(error);
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index e22c87ca1..2ba011543 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -17,6 +17,8 @@
 
 import { defineStore } from 'pinia';
 import {
+    useAccountStore,
+    useEVMStore,
     useFeedbackStore,
 } from 'src/antelope';
 
@@ -70,6 +72,7 @@ export interface ChainModel {
 
 export interface EvmChainModel {
     apy: string;
+    stakeRatio: ethers.BigNumber;
     gasPrice: ethers.BigNumber;
     settings: EVMChainSettings;
     tokens: TokenClass[];
@@ -84,11 +87,12 @@ export interface NativeChainModel {
 const newChainModel = (network: string, isNative: boolean): ChainModel => {
     const model = {
         apy: '',
+        stakeRatio: ethers.constants.Zero,
         settings: settings[network],
         tokens: [],
     } as ChainModel;
     if (!isNative) {
-        (model as EvmChainModel).gasPrice = ethers.BigNumber.from(0);
+        (model as EvmChainModel).gasPrice = ethers.constants.Zero;
     }
     return model;
 };
@@ -116,6 +120,7 @@ export const useChainStore = defineStore(store_name, {
         getExplorerUrl: () => (network: string) => (settings[network] as EVMChainSettings).getExplorerUrl(),
         getEcosystemUrl: () => (network: string) => (settings[network] as EVMChainSettings).getEcosystemUrl(),
         getNetworkSettings: () => (network: string) => settings[network],
+        getStakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).stakeRatio ?? ethers.constants.Zero,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -129,6 +134,7 @@ export const useChainStore = defineStore(store_name, {
                     this.updateSettings(label),
                     this.updateApy(label),
                     this.updateGasPrice(label),
+                    this.updateStakedRatio(label),
                 ]);
             } catch (error) {
                 console.error(error);
@@ -153,11 +159,7 @@ export const useChainStore = defineStore(store_name, {
             this.trace('updateApy', label);
             const chain = this.getChain(label);
             try {
-                if (chain.settings.isNative()) {
-                    chain.apy = await (chain.settings as NativeChainSettings).getApy();
-                } else {
-                    chain.apy = '';
-                }
+                chain.apy = await chain.settings.getApy();
             } catch (error) {
                 console.error(error);
                 throw new Error('antelope.chain.error_apy');
@@ -165,6 +167,57 @@ export const useChainStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading('updateApy');
             }
         },
+        async actualUpdateStakedRatio(label: string): Promise<ethers.BigNumber> {
+            // first we need the contract instance to be able to execute queries
+            this.trace('actualUpdateStakedRatio', label);
+            useFeedbackStore().setLoading('actualUpdateStakedRatio');
+            const evm = useEVMStore();
+            const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
+            const sysToken = chain_settings.getSystemToken();
+            const stkToken = chain_settings.getStakedSystemToken();
+            const authenticator = useAccountStore().getEVMAuthenticator(label);
+            if (!authenticator) {
+                useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+                this.trace('actualUpdateStakedRatio', label, '-> no authenticator');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contract = await evm.getContract(authenticator, stkToken.address, stkToken.type);
+            if (!contract) {
+                useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+                this.trace('actualUpdateStakedRatio', label, '-> no contract');
+                return ethers.constants.Zero;
+            }
+            const contractInstance = await contract.getContractInstance();
+            // Now we preview a deposit of 1 SYS to get the ratio
+            const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
+            const ratio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+
+            // Finally we update the store
+            this.setStakedRatio(label, ratio);
+            useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+            return ratio;
+        },
+        async updateStakedRatio(label: string): Promise<ethers.BigNumber> {
+            const accountModel = useAccountStore().getAccount(label);
+            if (accountModel && accountModel.account) {
+                // if the account is already logged, we can update the staked ratio
+                return this.actualUpdateStakedRatio(label);
+            } else {
+                // if the account is not logged, we need to wait for the login and then update the staked ratio
+                return new Promise((resolve) => {
+                    const sub = getAntelope().events.onAccountChanged.subscribe((result) => {
+                        if (result.label === label) {
+                            sub.unsubscribe();
+                            if (result.account) {
+                                // we need the user to be logged because the way of getting the staked ratio is by
+                                // executing an action from contract and that internally attempts retrieve the account from the provided signer
+                                resolve(this.actualUpdateStakedRatio(label));
+                            }
+                        }
+                    });
+                });
+            }
+        },
         async updateGasPrice(label: string): Promise<void> {
             useFeedbackStore().setLoading('updateGasPrice');
             this.trace('updateGasPrice');
@@ -211,6 +264,7 @@ export const useChainStore = defineStore(store_name, {
                 // make the change only if they are different
                 if (network !== this.__chains[label]?.settings.getNetwork()) {
                     this.__chains[label] = newChainModel(network, settings[network].isNative());
+                    this.trace('setChain', label, network, '--> void this.updateChainData(label);');
                     void this.updateChainData(label);
                     getAntelope().events.onNetworkChanged.next(
                         { label, chain: this.__chains[label] },
@@ -220,6 +274,11 @@ export const useChainStore = defineStore(store_name, {
                 throw new AntelopeError('antelope.chain.error_invalid_network', { network });
             }
         },
+        setStakedRatio(label: string, ratio: ethers.BigNumber) {
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
+            (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
+        },
     },
 });
 
diff --git a/src/antelope/stores/evm.ts b/src/antelope/stores/evm.ts
index 15087714e..5146a05af 100644
--- a/src/antelope/stores/evm.ts
+++ b/src/antelope/stores/evm.ts
@@ -62,7 +62,7 @@ export interface EVMState {
 const store_name = 'evm';
 
 const createManager = (authenticator: EVMAuthenticator):EvmContractManagerI => ({
-    getSigner: async () => toRaw((await authenticator.web3Provider()).getSigner()),
+    getSigner: async () => toRaw((await authenticator.web3Provider()).getSigner(useAccountStore().getAccount(authenticator.label).account)),
     getWeb3Provider: () => authenticator.web3Provider(),
     getFunctionIface: (hash:string) => toRaw(useEVMStore().getFunctionIface(hash)),
     getEventIface: (hash:string) => toRaw(useEVMStore().getEventIface(hash)),
@@ -332,7 +332,8 @@ export const useEVMStore = defineStore(store_name, {
             // Get from already queried contracts, add token data if needed & not present
             // (ie: queried beforehand w/o suspectedToken or a wrong suspectedToken)
             const chain_settings = useChainStore().getChain(authenticator.label).settings as EVMChainSettings;
-            const cached = chain_settings.getContract(addressLower);
+            const cached = await chain_settings.getContract(addressLower);
+            this.trace('getContract', address, 'cached:', cached);
             // If cached is null, it means this is the first time this address is queried
             if (cached !== null) {
                 if (
@@ -347,10 +348,6 @@ export const useEVMStore = defineStore(store_name, {
                 }
             }
 
-
-            // We mark this address as not existing so we don't query it again
-            chain_settings.setContractAsNotExisting(addressLower);
-
             // Then we try to get the contract creation info. If it fails, we never overwrite the previous call to set contract as not existing
             const creationInfo = await this.getContractCreation(authenticator, addressLower);
             // The the contract passes the creation info check,
@@ -369,8 +366,15 @@ export const useEVMStore = defineStore(store_name, {
                 return contract;
             }
 
-            this.trace('getContract', 'returning empty contract', address, creationInfo);
-            return await this.getEmptyContract(authenticator, addressLower, creationInfo);
+            if (creationInfo) {
+                this.trace('getContract', 'returning empty contract', address, creationInfo);
+                return await this.getEmptyContract(authenticator, addressLower, creationInfo);
+            } else {
+                // We mark this address as not existing so we don't query it again
+                this.trace('getContract', 'returning null', address);
+                chain_settings.setContractAsNotExisting(addressLower);
+                return null;
+            }
         },
 
         async checkBucket(authenticator: EVMAuthenticator, address:string): Promise<EvmContractMetadata | null> {
diff --git a/src/antelope/types/ChainSettings.ts b/src/antelope/types/ChainSettings.ts
index ff6ee121b..d21f60f07 100644
--- a/src/antelope/types/ChainSettings.ts
+++ b/src/antelope/types/ChainSettings.ts
@@ -11,11 +11,14 @@ export interface ChainSettings {
     getSmallLogoPath(): string;
     getLargeLogoPath(): string;
     getChainId(): string;
+    getHyperionEndpoint(): string;
     getRPCEndpoint(): RpcEndpoint;
+    getApiEndpoint(): string;
     getPriceData(): Promise<PriceChartData>;
     getUsdPrice(): Promise<number>;
     getSystemTokens(): TokenClass[];
     getNFTsInventory(address: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>;
     getNFTsCollection(contract: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>;
     trackAnalyticsEvent(params: Record<string, unknown>): void;
+    getApy(): Promise<string>;
 }
diff --git a/src/antelope/wallets/index.ts b/src/antelope/wallets/index.ts
index 33b7ee216..c29fab7e1 100644
--- a/src/antelope/wallets/index.ts
+++ b/src/antelope/wallets/index.ts
@@ -26,12 +26,12 @@ export class AntelopeWallets {
         this.trace('getAutenticator', name);
         return this.authenticators.get(name);
     }
+
 }
 
 export * from 'src/antelope/wallets/authenticators/EVMAuthenticator';
 export * from 'src/antelope/wallets/authenticators/InjectedProviderAuth';
 export * from 'src/antelope/wallets/authenticators/MetamaskAuth';
 export * from 'src/antelope/wallets/authenticators/OreIdAuth';
-export * from 'src/antelope/wallets/authenticators/SafePalAuth';
 export * from 'src/antelope/wallets/authenticators/WalletConnectAuth';
 export * from 'src/antelope/wallets/authenticators/SafePalAuth';
diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 9fb48b9c9..a7e94624c 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -5,7 +5,7 @@ import InlineSvg from 'vue-inline-svg';
 import UserInfo from 'components/evm/UserInfo.vue';
 import { getAntelope, useChainStore } from 'src/antelope';
 import EVMLoginButtons from 'pages/home/EVMLoginButtons.vue';
-import { getShortenedHash } from 'src/antelope/stores/utils';
+import { getShortenedHash, prettyPrintBalance } from 'src/antelope/stores/utils';
 
 const ant = getAntelope();
 const accountStore = ant.stores.account;
@@ -25,6 +25,17 @@ export default defineComponent({
         notifyOnSuccessfulLogin: false,
     }),
     computed: {
+        isLoadingApy() {
+            return this.prettyPrintApy === '';
+        },
+        prettyPrintApy() {
+            const apy = chainStore.currentEvmChain?.apy;
+            if (apy) {
+                return apy + '%';
+            } else {
+                return '';
+            }
+        },
         showMenuIcon() {
             return this.$q.screen.lt.md && !this.showBackButton;
         },
@@ -279,7 +290,14 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
+                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }}
+                    <q-spinner
+                        v-if="isLoadingApy"
+                        color="white"
+                        class="c-app-nav__apy-spinner"
+                    />
+                    <b> {{ prettyPrintApy }}</b>
+                </span>
             </li>
 
             <li
@@ -491,6 +509,11 @@ export default defineComponent({
         display: inline-block;
     }
 
+    &__apy-spinner {
+        size: 16px;
+        margin-top: -5px;
+    }
+
     &__icon {
         // svg color overrides
         &--current-route:not(#{$this}__icon--acorn) path {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 1b10f0552..2285e02cd 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -9,6 +9,8 @@ const props = defineProps<{
         secondaryText?: string;
         lowContrastSecondaryText?: boolean;
         useSmallBox?: boolean;
+        isPrimaryLoading?: boolean;
+        isSecondaryLoading?: boolean;
     }[];
 }>();
 </script>
@@ -35,14 +37,23 @@ const props = defineProps<{
             />
         </div>
 
-        <h3>{{ card.primaryText }}</h3>
+        <h3 v-if="card.isPrimaryLoading" >
+            <q-spinner-dots class="c-scrollable-info-cards__primary-loading"  color="primary" />
+        </h3>
+        <h3 v-else class="c-scrollable-info-cards__primary-text">
+            {{ card.primaryText }}
+        </h3>
+
         <span
             v-if="card.secondaryText"
             :class="{
-                'u-text--low-contrast': card.lowContrastSecondaryText
+                'c-scrollable-info-cards__low-contrast': card.lowContrastSecondaryText
             }"
         >
-            {{ card.secondaryText }}
+            <q-spinner-dots v-if="card.isSecondaryLoading" class="c-scrollable-info-cards__secondary-loading" color="primary" />
+            <span v-else class="c-scrollable-info-cards__secondary-text">
+                {{ card.secondaryText }}
+            </span>
         </span>
     </div>
 </div>
@@ -67,6 +78,17 @@ const props = defineProps<{
         margin: auto;
     }
 
+    &__primary-loading {
+        margin-left: 4px;
+    }
+
+    &__secondary-loading {
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
+    }
+
+
     &__card {
         background-color: var(--bg-color);
         padding: 12px;
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 14088ecf0..cf3eb47f0 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -517,6 +517,7 @@ export default {
             error_update_data: 'Error in updating data',
             error_apy: 'Error in getting APY',
             error_invalid_network: 'Invalid network',
+            error_no_default_authenticator: 'No default authenticator found',
         },
         account: {
             error_login_native: 'An error has occurred trying to login to the native chain',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 52b4b682d..d5fcb9209 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -4,41 +4,70 @@ import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
 import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
-import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
 
 import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
 
-
+const label = 'current';
 const { t: $t } = useI18n();
 const userStore = useUserStore();
 const balancesStore = useBalancesStore();
 const chainStore = useChainStore();
 const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
 // data
-const systemTokenPrice = ref(0); // always equal to wrapped token price
 const loading = ref(true);
 
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
 const fiatCurrency = computed(() => userStore.fiatCurrency);
-const systemTokenName = computed(() => chainSettings.getSystemToken().name);
-const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
-const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
+const systemToken = chainSettings.getSystemToken();
+const stakedToken = chainSettings.getStakedSystemToken();
 
 const totalFiatValueText = ref('$ 4,324.35');
 
-const stakedFiatValueText = ref('$ 4,000.23');
-const stakedTokenBalanceBn = ref(ethers.utils.parseUnits('34021.230', WEI_PRECISION));
+// First cell: Staked
+const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || !stakedRatio.value.isZero());
+const stakedExpressedInSystemBalanceBn = computed(() => {
+    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(stakedRatio.value, stakedToken.decimals);
+        return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const systemTokenPrice = ref(systemToken.price.value);
+const stakedFiatValueBn = computed(() => {
+    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(stakedExpressedInSystemBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+
+// Second cell: Unstaking
 const unstakingFiatValueText = ref('$ 200.72');
-const unstakingBalanceBn = ref(ethers.utils.parseUnits('1242.0312', WEI_PRECISION));
-const withdrawableFiatValueText = ref('$ 123.02');
-const withdrawableBalanceBn = ref(ethers.utils.parseUnits('245.0225', WEI_PRECISION));
+const unstakingBalanceBn = ref(stakedTokenBalanceBn);
 
-const apyPrittyPrint = ref('8.23%');
+// Third cell: Withdrawable
+const withdrawableFiatValueText = ref('$ 123.02');
+const withdrawableBalanceBn = ref(stakedRatio);
+
+const apyPrittyPrint = computed(() => {
+    const apy = chainStore.currentEvmChain?.apy;
+    if (apy) {
+        return apy + '%';
+    } else {
+        return '--';
+    }
+});
+const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref('10 days');
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
@@ -46,44 +75,46 @@ const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
 const evmNetworkName = ref('Telos EVM');
 
 const firstLineData = computed(() => [{
-    label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
-    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
-    primaryText: stakedFiatValueText.value,
-    secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
+    label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
+    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
+    primaryText: prettyPrintToken(stakedFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isStakedLoading.value ? '' : prettyPrintToken(stakedExpressedInSystemBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
+    isPrimaryLoading: isStakedLoading.value,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.unstaking_card_label'),
-    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
     primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.withdrawable_card_label'),
-    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
     primaryText: withdrawableFiatValueText.value,
-    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemTokenSymbol.value),
+    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }]);
 
 const secondLineData = computed(() => [{
-    label: $t('evm_stake.apy_card_label', { symbol: systemTokenSymbol.value }),
-    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    label: $t('evm_stake.apy_card_label', { symbol: systemToken.symbol }),
+    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
     secondaryText: apyPrittyPrint.value,
     lowContrastSecondaryText: false,
+    isSecondaryLoading: apyisLoading.value,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.unstaking_period_card_label'),
-    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
     secondaryText: unlockPeriod.value,
     lowContrastSecondaryText: false,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.tvl_card_label'),
-    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
-    secondaryText: prettyPrintToken(tvlAmountBn.value, systemTokenSymbol.value),
+    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
+    secondaryText: prettyPrintToken(tvlAmountBn.value, systemToken.symbol),
     lowContrastSecondaryText: false,
     useSmallBox: true,
 }]);
@@ -92,7 +123,7 @@ const secondLineData = computed(() => [{
 // methods
 onBeforeMount(() => {
     chainSettings.getUsdPrice().then((price) => {
-        systemTokenPrice.value = price;
+        // systemTokenPrice.value = price;
     }).finally(() => {
         loading.value = false;
     });
@@ -114,7 +145,7 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 <template>
 <div class="c-staking-header">
     <div class="text-center q-mb-xl">
-        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemTokenName }) }}</h5>
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 

From 8c4d4930a1ff3215f08b7cc9e0646132e2de6301 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 23 Aug 2023 14:01:24 -0300
Subject: [PATCH 019/268] saving WIP

---
 src/antelope/stores/chain.ts                | 21 +++++++++++++++------
 src/pages/evm/staking/StakingPageHeader.vue | 11 +++++++++--
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 2ba011543..66eb3d516 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -73,6 +73,7 @@ export interface ChainModel {
 export interface EvmChainModel {
     apy: string;
     stakeRatio: ethers.BigNumber;
+    unstakeRatio: ethers.BigNumber;
     gasPrice: ethers.BigNumber;
     settings: EVMChainSettings;
     tokens: TokenClass[];
@@ -88,6 +89,7 @@ const newChainModel = (network: string, isNative: boolean): ChainModel => {
     const model = {
         apy: '',
         stakeRatio: ethers.constants.Zero,
+        unstakeRatio: ethers.constants.Zero,
         settings: settings[network],
         tokens: [],
     } as ChainModel;
@@ -121,6 +123,7 @@ export const useChainStore = defineStore(store_name, {
         getEcosystemUrl: () => (network: string) => (settings[network] as EVMChainSettings).getEcosystemUrl(),
         getNetworkSettings: () => (network: string) => settings[network],
         getStakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).stakeRatio ?? ethers.constants.Zero,
+        getUnstakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).unstakeRatio ?? ethers.constants.Zero,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -167,7 +170,7 @@ export const useChainStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading('updateApy');
             }
         },
-        async actualUpdateStakedRatio(label: string): Promise<ethers.BigNumber> {
+        async actualUpdateStakedRatio(label: string): Promise<void> {
             // first we need the contract instance to be able to execute queries
             this.trace('actualUpdateStakedRatio', label);
             useFeedbackStore().setLoading('actualUpdateStakedRatio');
@@ -185,19 +188,20 @@ export const useChainStore = defineStore(store_name, {
             if (!contract) {
                 useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
                 this.trace('actualUpdateStakedRatio', label, '-> no contract');
-                return ethers.constants.Zero;
+                return;
             }
             const contractInstance = await contract.getContractInstance();
             // Now we preview a deposit of 1 SYS to get the ratio
             const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
-            const ratio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+            const stakedRatio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+            const unstakedRatio:ethers.BigNumber = await contractInstance.previewWithdraw(oneSys);
 
             // Finally we update the store
-            this.setStakedRatio(label, ratio);
+            this.setStakedRatio(label, stakedRatio);
+            this.setUnstakedRatio(label, unstakedRatio);
             useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
-            return ratio;
         },
-        async updateStakedRatio(label: string): Promise<ethers.BigNumber> {
+        async updateStakedRatio(label: string): Promise<void> {
             const accountModel = useAccountStore().getAccount(label);
             if (accountModel && accountModel.account) {
                 // if the account is already logged, we can update the staked ratio
@@ -279,6 +283,11 @@ export const useChainStore = defineStore(store_name, {
             this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
         },
+        setUnstakedRatio(label: string, ratio: ethers.BigNumber) {
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            this.trace('setUnstakedRatio', label, ratio.toString(), ratioNumber);
+            (this.__chains[label] as EvmChainModel).unstakeRatio = ratio;
+        },
     },
 });
 
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index d5fcb9209..65b9bee54 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -32,10 +32,14 @@ const totalFiatValueText = ref('$ 4,324.35');
 // First cell: Staked
 const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
 const stakedRatio = computed(() => chainStore.getStakedRatio(label));
-const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || !stakedRatio.value.isZero());
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
     if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
-        const ratioNumber = ethers.utils.formatUnits(stakedRatio.value, stakedToken.decimals);
+        console.log('stakedRatio', stakedRatio.value.toString());
+        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
+        console.log('inverseRatio', inverseRatio.toString());
+        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
+        console.log('ratioNumber', ratioNumber);
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -149,6 +153,9 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 
+    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
+    <div>{{ stakedRatio?.toString() }}</div>
+
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 53cc7950907f1cd58450982750854edb277ca1d4 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Wed, 23 Aug 2023 15:23:53 -0400
Subject: [PATCH 020/268] ensure stale prices are not shown

---
 src/antelope/chains/EVMChainSettings.ts       |  7 ++++--
 src/antelope/stores/utils/date-utils.ts       | 12 +++++++++
 .../antelope/stores/utils/date-utils.spec.ts  | 25 +++++++++++++++++++
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/antelope/stores/utils/date-utils.ts
 create mode 100644 test/jest/__tests__/antelope/stores/utils/date-utils.spec.ts

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index d09063351..83e9c9e9b 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -26,6 +26,7 @@ import {
 import EvmContract from 'src/antelope/stores/utils/contracts/EvmContract';
 import { ethers } from 'ethers';
 import { toStringNumber } from 'src/antelope/stores/utils/currency-utils';
+import { dateIsWithinXMinutes } from 'src/antelope/stores/utils/date-utils';
 import { getAntelope } from 'src/antelope';
 
 
@@ -268,8 +269,10 @@ export default abstract class EVMChainSettings implements ChainSettings {
                     const balance = ethers.BigNumber.from(result.balance);
                     const tokenBalance = new TokenBalance(token, balance);
                     tokens.push(tokenBalance);
-                    // If we have market data we use it
-                    if (typeof contractData.calldata === 'object') {
+                    const priceUpdatedWithinTenMins = !!contractData.calldata.marketdata_updated && dateIsWithinXMinutes(+contractData.calldata.marketdata_updated, 10);
+
+                    // If we have market data we use it, as long as the price was updated within the last 10 minutes
+                    if (typeof contractData.calldata === 'object' && priceUpdatedWithinTenMins) {
                         const price = (+(contractData.calldata.price ?? 0)).toFixed(12);
                         const marketInfo = { ...contractData.calldata, price } as MarketSourceInfo;
                         const marketData = new TokenMarketData(marketInfo);
diff --git a/src/antelope/stores/utils/date-utils.ts b/src/antelope/stores/utils/date-utils.ts
new file mode 100644
index 000000000..d4c809a17
--- /dev/null
+++ b/src/antelope/stores/utils/date-utils.ts
@@ -0,0 +1,12 @@
+export function dateIsWithinXMinutes(epochMs: number, minutes: number) {
+    if (epochMs <= 0) {
+        throw new Error('epochMs must be greater than 0');
+    }
+
+    // make a date object which represents the time X minutes ago
+    const xMinsAgo = new Date();
+    xMinsAgo.setMinutes(xMinsAgo.getMinutes() - minutes);
+
+    // return true if the date is within the defined timeframe
+    return new Date(epochMs) > xMinsAgo;
+}
diff --git a/test/jest/__tests__/antelope/stores/utils/date-utils.spec.ts b/test/jest/__tests__/antelope/stores/utils/date-utils.spec.ts
new file mode 100644
index 000000000..6c518aa05
--- /dev/null
+++ b/test/jest/__tests__/antelope/stores/utils/date-utils.spec.ts
@@ -0,0 +1,25 @@
+import { dateIsWithinXMinutes } from 'src/antelope/stores/utils/date-utils';
+
+describe('dateIsWithinXMinutes', () => {
+    it('should throw an error if epochMs is less than or equal to 0', () => {
+        expect(() => dateIsWithinXMinutes(0, 1)).toThrow();
+        expect(() => dateIsWithinXMinutes(-1, 1)).toThrow();
+    });
+
+    it('should return true if the date is within the defined timeframe', () => {
+        const now = Date.now();
+        const fiveMinutesAgo = now - 1000 * 60 * 5;
+        const timeframeMinutes = 10;
+
+        expect(dateIsWithinXMinutes(fiveMinutesAgo, timeframeMinutes)).toBe(true);
+    });
+
+    it('should return false if the date is not within the defined timeframe', () => {
+        const now = Date.now();
+        const tenMinutesAgo = now - 1000 * 60 * 10;
+        const timeframeMinutes = 5;
+
+        // timeframe here is 5 minutes
+        expect(dateIsWithinXMinutes(tenMinutesAgo, timeframeMinutes)).toBe(false);
+    });
+});

From 38a8ab9cede0f4b3b8f3d752fcfda5f31d167e96 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Thu, 24 Aug 2023 13:08:38 -0400
Subject: [PATCH 021/268] WIP

---
 src/antelope/chains/EVMChainSettings.ts       |   5 +-
 src/antelope/stores/history.ts                |  62 +++-
 src/antelope/types/EvmTransaction.ts          |  27 +-
 src/antelope/types/Filters.ts                 |   1 +
 src/pages/evm/wallet/WalletTransactionRow.vue |   4 +-
 .../evm/wallet/WalletTransactionRow.spec.ts   | 330 +++++++++---------
 6 files changed, 246 insertions(+), 183 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index d09063351..dda168537 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -376,8 +376,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
         const includePagination = true;
         const logTopic = filter.logTopic;
         const full = filter.full ?? true;
+        const type = filter.type;
 
-        let aux = {};
+        let aux = {
+            type,
+        } as Record<string, unknown>;
 
         if (limit !== undefined) {
             aux = { limit, ...aux };
diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 7db9569bc..7c86c3c91 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -24,13 +24,16 @@ import {
     EvmTransaction,
     AntelopeError,
     IndexerTransactionsFilter,
-    ShapedTransactionRow,
     ParsedIndexerAccountTransactionsContract,
-    EVMTransactionsPaginationData, TransactionValueData, EvmSwapFunctionNames,
+    EVMTransactionsPaginationData,
+    TransactionValueData,
+    EvmSwapFunctionNames,
+    ShapedErc20TransactionRow,
+    ShapedNftTransactionRow,
+    ShapedTransactionRow,
 } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { useChainStore } from 'src/antelope/stores/chain';
-import { toRaw } from 'vue';
 import { BigNumber } from 'ethers';
 import { getAntelope, useContractStore, useUserStore } from '..';
 import { formatUnits } from 'ethers/lib/utils';
@@ -51,7 +54,7 @@ export interface HistoryState {
         [label: Label]: number,
     },
     __shaped_evm_transaction_rows: {
-        [label: Label]: ShapedTransactionRow[],
+        [label: Label]: (ShapedErc20TransactionRow | ShapedNftTransactionRow)[],
     };
     __evm_transactions_pagination_data: {
         [label: Label]: EVMTransactionsPaginationData,
@@ -59,13 +62,14 @@ export interface HistoryState {
 }
 
 const store_name = 'history';
+const max_response_transactions = 5000;
 
 export const useHistoryStore = defineStore(store_name, {
     state: (): HistoryState => (historyInitialState),
     getters: {
         getEVMTransactions: state => (label: Label): EvmTransaction[] => state.__evm_transactions[label].transactions,
         getEVMTransactionsFilter: state => state.__evm_filter,
-        getShapedTransactionRows: state => (label: Label): ShapedTransactionRow[] => state.__shaped_evm_transaction_rows[label],
+        getShapedTransactionRows: state => (label: Label): (ShapedErc20TransactionRow | ShapedNftTransactionRow)[] => state.__shaped_evm_transaction_rows[label],
         getEVMTransactionsPagination: state => (label: Label): EVMTransactionsPaginationData => state.__evm_transactions_pagination_data[label],
         getEvmTransactionsRowCount: state => (label: Label): number => state.__total_evm_transaction_count[label],
     },
@@ -94,11 +98,43 @@ export const useHistoryStore = defineStore(store_name, {
             feedbackStore.setLoading('history.fetchEVMTransactionsForAccount');
 
             try {
-                const response = await chain_settings.getEVMTransactions(toRaw(this.__evm_filter));
-                const contracts = response.contracts;
-                const transactions = response.results;
+                // eztodo make UI element to indicate more than 5000 txs?
+                const filter = {
+                    // address: this.__evm_filter.address, // eztodo clean up filter object
+                    address: '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607',
+                    limit: max_response_transactions,
+                    offset: 0,
+                    includeAbi: true,
+                    includePagination: true,
+                };
+
+                const responseErc20   = await chain_settings.getEVMTransactions({
+                    ...filter,
+                    type: 'erc20',
+                });
+                const responseErc721 = await chain_settings.getEVMTransactions({
+                    ...filter,
+                    type: 'erc721',
+                });
+                const responseErc1155 = await chain_settings.getEVMTransactions({
+                    ...filter,
+                    type: 'erc1155',
+                });
 
-                this.setEvmTransactionsRowCount(label, response.total_count);
+                const contracts = {
+                    ...responseErc20.contracts,
+                    ...responseErc721.contracts,
+                    ...responseErc1155.contracts,
+                };
+                const transactions = [
+                    ...responseErc20.results,
+                    ...responseErc721.results,
+                    ...responseErc1155.results,
+                ].sort((a, b) => b.timestamp - a.timestamp); // eztodo verify that this sort is correct
+
+                // eztodo for some reason, all results objects are the same
+                debugger;
+                this.setEvmTransactionsRowCount(label, transactions.length);
 
                 const contractAddresses = Object.keys(contracts);
                 const parsedContracts: Record<string, ParsedIndexerAccountTransactionsContract> = {};
@@ -179,6 +215,7 @@ export const useHistoryStore = defineStore(store_name, {
 
                 if (!isFailed) {
                     if (+tx.value) {
+                        // eztodo should i be using WEI_PRECISION here?
                         const valueInFiatBn = convertCurrency(BigNumber.from(tx.value), WEI_PRECISION, 2, tlosInUsd);
                         const valueInFiat = +formatUnits(valueInFiatBn, 2);
 
@@ -265,8 +302,11 @@ export const useHistoryStore = defineStore(store_name, {
                     failed: isFailed,
                 } as ShapedTransactionRow;
 
+                console.log(shapedTx);
+
+
                 // The shapedTxs may not be in the same order as the transactions
-                this.__shaped_evm_transaction_rows[label][index] = shapedTx;
+                // this.__shaped_evm_transaction_rows[label][index] = shapedTx;
 
                 feedbackStore.unsetLoading(loadingFlag);
             });
@@ -282,7 +322,7 @@ export const useHistoryStore = defineStore(store_name, {
             this.trace('setTransactions', label, transactions);
             useHistoryStore().__evm_transactions[label].transactions = transactions;
         },
-        setShapedTransactionRows(label: Label, transactions: ShapedTransactionRow[]) {
+        setShapedTransactionRows(label: Label, transactions: (ShapedErc20TransactionRow | ShapedNftTransactionRow)[]) {
             this.trace('setShapedTransactionRows', transactions);
             this.__shaped_evm_transaction_rows[label] = transactions;
         },
diff --git a/src/antelope/types/EvmTransaction.ts b/src/antelope/types/EvmTransaction.ts
index d1f0207af..57aae8b3f 100644
--- a/src/antelope/types/EvmTransaction.ts
+++ b/src/antelope/types/EvmTransaction.ts
@@ -42,6 +42,17 @@ export interface TransactionValueData {
     fiatValue?: number;
 }
 
+export interface NftTransactionData {
+    quantity: number;
+    tokenId: string;
+    tokenName: string;
+    collectionAddress: string;
+    collectionName?: string;
+    imgSrc?: string;
+    videoSrc?: string;
+    type: 'image' | 'video' | 'audio' | 'unknown';
+}
+
 export const EvmSwapFunctionNames = [
     'swapExactTokensForTokens',
     'swapTokensForExactTokens',
@@ -53,8 +64,8 @@ export const EvmSwapFunctionNames = [
 ];
 
 export interface ShapedTransactionRow {
-    id: string;
-    epoch: number;
+    id: string; // transaction ID
+    epoch: number; // epoch in milliseconds
     // action should be 'send', 'receive', 'swap', 'contractCreation', or some other action like 'approve'
     // a swap is any function in EvmSwapFunctionNames
     actionName: string;
@@ -62,13 +73,21 @@ export interface ShapedTransactionRow {
     fromPrettyName?: string;
     to: string; // address
     toPrettyName?: string;
-    valuesIn: TransactionValueData[];
-    valuesOut: TransactionValueData[];
     gasUsed?: number; // gas used in TLOS
     gasFiatValue?: number; // gas used in Fiat
     failed?: boolean;
 }
 
+export interface ShapedErc20TransactionRow extends ShapedTransactionRow {
+    valuesIn: TransactionValueData[];
+    valuesOut: TransactionValueData[];
+}
+
+export interface ShapedNftTransactionRow extends ShapedTransactionRow {
+    nftsIn: NftTransactionData[];
+    nftsOut: NftTransactionData[];
+}
+
 export interface IndexerAccountTransactionsContractData {
     symbol: string;
     creator: string;
diff --git a/src/antelope/types/Filters.ts b/src/antelope/types/Filters.ts
index 2da19e55a..0117b75b7 100644
--- a/src/antelope/types/Filters.ts
+++ b/src/antelope/types/Filters.ts
@@ -28,4 +28,5 @@ export interface IndexerTransactionsFilter {
     logTopic?: string; // match to the transaction logs' first topic
     full?: string; // Add internal transactions to the response
     forceMetadata?: number; // 1 to force metadata to be returned
+    type?: 'erc20' | 'erc721' | 'erc1155'; // filter by token type
 }
diff --git a/src/pages/evm/wallet/WalletTransactionRow.vue b/src/pages/evm/wallet/WalletTransactionRow.vue
index d5ff93924..ad5c5cac5 100644
--- a/src/pages/evm/wallet/WalletTransactionRow.vue
+++ b/src/pages/evm/wallet/WalletTransactionRow.vue
@@ -3,7 +3,7 @@ import { defineComponent, PropType } from 'vue';
 
 import InlineSvg from 'vue-inline-svg';
 
-import { ShapedTransactionRow } from 'src/antelope/types';
+import { ShapedErc20TransactionRow, ShapedNftTransactionRow } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { getLongDate } from 'src/antelope/stores/utils';
 import { useChainStore, useUserStore } from 'src/antelope';
@@ -30,7 +30,7 @@ export default defineComponent({
     },
     props: {
         transaction: {
-            type: Object as PropType<ShapedTransactionRow>,
+            type: Object as PropType<ShapedErc20TransactionRow | ShapedNftTransactionRow>,
             required: true,
         },
     },
diff --git a/test/jest/__tests__/pages/evm/wallet/WalletTransactionRow.spec.ts b/test/jest/__tests__/pages/evm/wallet/WalletTransactionRow.spec.ts
index 9e1309a4c..712c7ccc9 100644
--- a/test/jest/__tests__/pages/evm/wallet/WalletTransactionRow.spec.ts
+++ b/test/jest/__tests__/pages/evm/wallet/WalletTransactionRow.spec.ts
@@ -1,165 +1,165 @@
-import { shallowMount } from '@vue/test-utils';
-import { stubWithSlot } from 'test/jest/testing-helpers';
-
-const fakeExplorerUrl = 'example.com';
-const locale = 'en-US';
-const currency = 'USD';
-
-const antelopeMock = {
-    useChainStore: () => ({
-        currentChain: {
-            settings: {
-                getExplorerUrl: () => fakeExplorerUrl,
-                getSystemToken: () => ({
-                    symbol: 'TLOS',
-                }),
-            },
-        },
-    }),
-    useUserStore: () => ({
-        fiatLocale: locale,
-        fiatCurrency: currency,
-    }),
-};
-
-import WalletTransactionRow from 'pages/evm/wallet/WalletTransactionRow.vue';
-import { ShapedTransactionRow } from 'src/antelope/types';
-
-jest.mock('src/antelope', () => antelopeMock);
-
-
-describe('WalletTransactionRow.vue', () => {
-    const fakeDateSeconds = 1681775186;
-
-    beforeAll(() => {
-        // used so that timestamp text is the same for each test run, not depending on the day it is run
-        jest.useFakeTimers('modern').setSystemTime(new Date(fakeDateSeconds * 1000));
-    });
-
-    afterAll(() => {
-        jest.useRealTimers();
-    });
-
-    const defaultTxData: ShapedTransactionRow = {
-        id: '0x'.concat('1'.repeat(40)),
-        epoch: fakeDateSeconds,
-        actionName: '',
-        from: '0x'.concat('1'.repeat(40)),
-        fromPrettyName: '',
-        to: '0x'.concat('2'.repeat(40)),
-        toPrettyName: '',
-        valuesIn: [],
-        valuesOut: [],
-        gasUsed: 0.15,
-        gasFiatValue: 0.03,
-    };
-
-    function getMountOptions(tx: ShapedTransactionRow, isMobile: boolean) {
-        return {
-            global: {
-                mocks: {
-                    $q: {
-                        screen: {
-                            lt: {
-                                sm: isMobile,
-                            },
-                            gt: {
-                                xs: !isMobile,
-                            },
-                        },
-                    },
-                },
-                stubs: {
-                    'q-icon': stubWithSlot('q-icon'),
-                },
-            },
-            props: {
-                transaction: tx,
-            },
-        };
-    }
-
-    function runExpects(tx: ShapedTransactionRow) {
-        const mobileWrapper = shallowMount(WalletTransactionRow, getMountOptions(tx, true));
-        const desktopWrapper = shallowMount(WalletTransactionRow, getMountOptions(tx, true));
-
-        expect(mobileWrapper.element).toMatchSnapshot();
-        expect(desktopWrapper.element).toMatchSnapshot();
-    }
-
-
-    it('should have the right name', () => {
-        expect(WalletTransactionRow.name).toBe('WalletTransactionRow');
-    });
-
-    describe('row should be rendered correctly for', () => {
-        test('failed transactions', () => {
-            const tx = {
-                ...defaultTxData,
-                failed: true,
-            };
-
-            runExpects(tx);
-        });
-
-        test('addresses with an alias', () => {
-            const sendTx = {
-                ...defaultTxData,
-                actionName: 'send',
-                toPrettyName: 'SomeContract',
-            };
-
-            const otherTx= {
-                ...defaultTxData,
-                actionName: 'receive',
-                fromPrettyName: 'AContract',
-            };
-
-            runExpects(sendTx);
-            runExpects(otherTx);
-        });
-
-        test('transfers with no fiat price', () => {
-            const tx = {
-                ...defaultTxData,
-                actionName: 'swap',
-                toPrettyName: 'SomeContract',
-                valuesIn: [{
-                    amount: 100.54121,
-                    symbol: 'NERD',
-                }, {
-                    amount: 357542547.674235,
-                    symbol: 'SHIB',
-                }, {
-                    amount: 1307.45,
-                    symbol: 'TLOS',
-                    fiatValue: 54.45123513,
-                }],
-                valuesOut: [{
-                    amount: 100,
-                    symbol: 'sTLOS',
-                    fiatValue: 100,
-                }],
-            };
-
-            runExpects(tx);
-        });
-
-        test('transactions with an action name other than send/receive/swap', () => {
-            const tx = {
-                ...defaultTxData,
-                actionName: 'approve',
-            };
-
-            runExpects(tx);
-        });
-
-        test('transactions with no known method name', () => {
-            const tx = {
-                ...defaultTxData,
-            };
-
-            runExpects(tx);
-        });
-    });
-});
+// import { shallowMount } from '@vue/test-utils';
+// import { stubWithSlot } from 'test/jest/testing-helpers';
+
+// const fakeExplorerUrl = 'example.com';
+// const locale = 'en-US';
+// const currency = 'USD';
+
+// const antelopeMock = {
+//     useChainStore: () => ({
+//         currentChain: {
+//             settings: {
+//                 getExplorerUrl: () => fakeExplorerUrl,
+//                 getSystemToken: () => ({
+//                     symbol: 'TLOS',
+//                 }),
+//             },
+//         },
+//     }),
+//     useUserStore: () => ({
+//         fiatLocale: locale,
+//         fiatCurrency: currency,
+//     }),
+// };
+
+// import WalletTransactionRow from 'pages/evm/wallet/WalletTransactionRow.vue';
+// import { ShapedTransactionRow } from 'src/antelope/types';
+
+// jest.mock('src/antelope', () => antelopeMock);
+
+
+// describe('WalletTransactionRow.vue', () => {
+//     const fakeDateSeconds = 1681775186;
+
+//     beforeAll(() => {
+//         // used so that timestamp text is the same for each test run, not depending on the day it is run
+//         jest.useFakeTimers('modern').setSystemTime(new Date(fakeDateSeconds * 1000));
+//     });
+
+//     afterAll(() => {
+//         jest.useRealTimers();
+//     });
+
+//     const defaultTxData: ShapedTransactionRow = {
+//         id: '0x'.concat('1'.repeat(40)),
+//         epoch: fakeDateSeconds,
+//         actionName: '',
+//         from: '0x'.concat('1'.repeat(40)),
+//         fromPrettyName: '',
+//         to: '0x'.concat('2'.repeat(40)),
+//         toPrettyName: '',
+//         valuesIn: [],
+//         valuesOut: [],
+//         gasUsed: 0.15,
+//         gasFiatValue: 0.03,
+//     };
+
+//     function getMountOptions(tx: ShapedTransactionRow, isMobile: boolean) {
+//         return {
+//             global: {
+//                 mocks: {
+//                     $q: {
+//                         screen: {
+//                             lt: {
+//                                 sm: isMobile,
+//                             },
+//                             gt: {
+//                                 xs: !isMobile,
+//                             },
+//                         },
+//                     },
+//                 },
+//                 stubs: {
+//                     'q-icon': stubWithSlot('q-icon'),
+//                 },
+//             },
+//             props: {
+//                 transaction: tx,
+//             },
+//         };
+//     }
+
+//     function runExpects(tx: ShapedTransactionRow) {
+//         const mobileWrapper = shallowMount(WalletTransactionRow, getMountOptions(tx, true));
+//         const desktopWrapper = shallowMount(WalletTransactionRow, getMountOptions(tx, true));
+
+//         expect(mobileWrapper.element).toMatchSnapshot();
+//         expect(desktopWrapper.element).toMatchSnapshot();
+//     }
+
+
+//     it('should have the right name', () => {
+//         expect(WalletTransactionRow.name).toBe('WalletTransactionRow');
+//     });
+
+//     describe('row should be rendered correctly for', () => {
+//         test('failed transactions', () => {
+//             const tx = {
+//                 ...defaultTxData,
+//                 failed: true,
+//             };
+
+//             runExpects(tx);
+//         });
+
+//         test('addresses with an alias', () => {
+//             const sendTx = {
+//                 ...defaultTxData,
+//                 actionName: 'send',
+//                 toPrettyName: 'SomeContract',
+//             };
+
+//             const otherTx= {
+//                 ...defaultTxData,
+//                 actionName: 'receive',
+//                 fromPrettyName: 'AContract',
+//             };
+
+//             runExpects(sendTx);
+//             runExpects(otherTx);
+//         });
+
+//         test('transfers with no fiat price', () => {
+//             const tx = {
+//                 ...defaultTxData,
+//                 actionName: 'swap',
+//                 toPrettyName: 'SomeContract',
+//                 valuesIn: [{
+//                     amount: 100.54121,
+//                     symbol: 'NERD',
+//                 }, {
+//                     amount: 357542547.674235,
+//                     symbol: 'SHIB',
+//                 }, {
+//                     amount: 1307.45,
+//                     symbol: 'TLOS',
+//                     fiatValue: 54.45123513,
+//                 }],
+//                 valuesOut: [{
+//                     amount: 100,
+//                     symbol: 'sTLOS',
+//                     fiatValue: 100,
+//                 }],
+//             };
+
+//             runExpects(tx);
+//         });
+
+//         test('transactions with an action name other than send/receive/swap', () => {
+//             const tx = {
+//                 ...defaultTxData,
+//                 actionName: 'approve',
+//             };
+
+//             runExpects(tx);
+//         });
+
+//         test('transactions with no known method name', () => {
+//             const tx = {
+//                 ...defaultTxData,
+//             };
+
+//             runExpects(tx);
+//         });
+//     });
+// });

From 44b6517b58fb7cefa63e26b20acb22b9fb85194e Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 24 Aug 2023 20:00:04 -0300
Subject: [PATCH 022/268] Fetching real Rex data for the staking page header

---
 src/antelope/chains/EVMChainSettings.ts       |   1 +
 .../chains/evm/telos-evm-testnet/index.ts     |   6 +-
 src/antelope/chains/evm/telos-evm/index.ts    |   6 +-
 src/antelope/stores/rex.ts                    | 141 +++++++++++++++++-
 src/pages/evm/staking/StakingPageHeader.vue   |  65 ++++++--
 5 files changed, 200 insertions(+), 19 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 45f91ee47..c68b4340a 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -215,6 +215,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract getSystemToken(): TokenClass;
     abstract getStakedSystemToken(): TokenClass;
     abstract getWrappedSystemToken(): TokenClass;
+    abstract getEscrowContractAddress(): string;
     abstract getChainId(): string;
     abstract getDisplay(): string;
     abstract getHyperionEndpoint(): string;
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index 20b915bfd..7f1778c14 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -50,7 +50,7 @@ const RPC_ENDPOINT = {
     port: 443,
     path: '/evm',
 };
-
+const ESCROW_CONTRACT_ADDRESS = '0x7E9cF9fBc881652B05BB8F26298fFAB538163b6f';
 const API_ENDPOINT = 'https://api-dev.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://testnet.teloscan.io';
@@ -102,6 +102,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return W_TOKEN;
     }
 
+    getEscrowContractAddress(): string {
+        return ESCROW_CONTRACT_ADDRESS;
+    }
+
     async getUsdPrice(): Promise<number> {
         if (this.hasIndexerSupport()) {
             const nativeTokenSymbol = this.getSystemToken().symbol;
diff --git a/src/antelope/chains/evm/telos-evm/index.ts b/src/antelope/chains/evm/telos-evm/index.ts
index 2d98d7581..06a4538fc 100644
--- a/src/antelope/chains/evm/telos-evm/index.ts
+++ b/src/antelope/chains/evm/telos-evm/index.ts
@@ -50,7 +50,7 @@ const RPC_ENDPOINT = {
     port: 443,
     path: '/evm',
 };
-
+const ESCROW_CONTRACT_ADDRESS = '0x95F5713A1422Aa3FBD3DCB8D553945C128ee3855';
 const API_ENDPOINT = 'https://api.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://teloscan.io';
@@ -102,6 +102,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return W_TOKEN;
     }
 
+    getEscrowContractAddress(): string {
+        return ESCROW_CONTRACT_ADDRESS;
+    }
+
     async getUsdPrice(): Promise<number> {
         if (this.hasIndexerSupport()) {
             const nativeTokenSymbol = this.getSystemToken().symbol;
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 6c4006b34..50198bcd6 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -5,14 +5,47 @@
  * the state of that account in the REX system.
  */
 
+import { ethers } from 'ethers';
 import { defineStore } from 'pinia';
+import { filter } from 'rxjs';
 import {
-    createInitFunction,
+    isTracingAll,
     createTraceFunction,
+    useFeedbackStore,
 } from 'src/antelope/stores/feedback';
+import { AntelopeError, Label } from 'src/antelope/types';
+import { toRaw } from 'vue';
+import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
+import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+
+
+
+export interface EvmRexDeposit {
+    amount: ethers.BigNumber;
+    until: ethers.BigNumber;
+}
+
+export interface RexModel {
+    withdrawable: ethers.BigNumber;
+    balance: ethers.BigNumber;
+    totalStaking: ethers.BigNumber;
+}
+
+export interface NativeRexModel extends RexModel {
+    _: boolean; // dummy property to avoid lint issues
+}
+
+export interface EvmRexModel extends RexModel {
+    withdrawable: ethers.BigNumber;
+    deposits: EvmRexDeposit[];
+    balance: ethers.BigNumber;
+    totalStaking: ethers.BigNumber;
+}
+
 
 export interface RexState {
-    __: string;
+    __rexData: { [label: Label]: RexModel };
 }
 
 const store_name = 'rex';
@@ -20,13 +53,113 @@ const store_name = 'rex';
 export const useRexStore = defineStore(store_name, {
     state: (): RexState => (rexInitialState),
     getters: {
+        getRexData: state => (label: string) => state.__rexData[label] ?? null,
     },
     actions: {
         trace: createTraceFunction(store_name),
-        init: createInitFunction(store_name),
+        init: () => {
+            useFeedbackStore().setDebug(store_name, isTracingAll());
+            getAntelope().events.onAccountChanged.pipe(
+                filter(({ label, account }) => !!label && !!account),
+            ).subscribe({
+                next: async ({ label, account }) => {
+                    if (label === 'current') {
+                        await useRexStore().updateRexDataForAccount(label, toRaw(account));
+                    }
+                },
+            });
+        },
+        async getContractInstance(label: string, address: string) {
+            const authenticator = useAccountStore().getEVMAuthenticator(label);
+            if (!authenticator) {
+                this.trace('getStakedSystemContractInstance', label, '-> no authenticator');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contract = await useEVMStore().getContract(authenticator, address);
+            if (!contract) {
+                this.trace('getStakedSystemContractInstance', label, '-> no contract');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contractInstance = await contract.getContractInstance();
+            return contractInstance;
+        },
+        async getStakedSystemContractInstance(label: string) {
+            const address = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().address;
+            return this.getContractInstance(label, address);
+        },
+        async getEscrowContractInstance(label: string) {
+            const address = (useChainStore().getChain(label).settings as EVMChainSettings).getEscrowContractAddress();
+            return this.getContractInstance(label, address);
+        },
+        async updateTotalStaking(label: string) {
+            this.trace('updateTotalStaking', label);
+            const contract = await this.getStakedSystemContractInstance(label);
+            const totalStaking = await contract.totalAssets();
+            this.setTotalStaking(label, totalStaking);
+        },
+        async updateRexDataForAccount(label: string, account: AccountModel | null) {
+            this.trace('updateRexDataForAccount', label, account);
+            useFeedbackStore().setLoading('updateRexDataForAccount');
+            try {
+                await Promise.all([
+                    this.updateWithdrawable(label),
+                    this.updateDeposits(label),
+                    this.updateBalance(label),
+                    this.updateTotalStaking(label),
+                ]);
+            } catch (error) {
+                console.error(error);
+                useFeedbackStore().unsetLoading('updateRexDataForAccount');
+            }
+        },
+        async updateWithdrawable(label: string) {
+            this.trace('updateWithdrawable', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const withdrawable = await contract.maxWithdraw(address);
+            this.setWithdrawable(label, withdrawable);
+        },
+        async updateDeposits(label: string) {
+            this.trace('updateDeposits', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const deposits = await contract.depositsOf(address);
+            this.setDeposits(label, deposits);
+        },
+        async updateBalance(label: string) {
+            this.trace('updateBalance', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const balance = await contract.balanceOf(address);
+            this.setBalance(label, balance);
+        },
+        // commits ---------------
+        setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(withdrawable, 18));
+            this.trace('setWithdrawable', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).withdrawable = withdrawable;
+        },
+        setDeposits(label: string, deposits: EvmRexDeposit[]) {
+            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, 18))));
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).deposits = deposits;
+        },
+        setBalance(label: string, balance: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(balance, 18));
+            this.trace('setBalance', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).balance = balance;
+        },
+        setTotalStaking(label: string, totalStaking: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(totalStaking, 18));
+            this.trace('setTotalStaking', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).totalStaking = totalStaking;
+        },
     },
 });
 
 const rexInitialState: RexState = {
-    __: '',
+    __rexData: {},
 };
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 8b8e2b1d1..934008060 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -3,7 +3,7 @@ import { computed, onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
-import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
+import { useUserStore, useBalancesStore, useChainStore, useRexStore } from 'src/antelope';
 import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
@@ -42,9 +42,9 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = ref(systemToken.price.value);
+const systemTokenPrice = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value);
 const stakedFiatValueBn = computed(() => {
-    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value) {
+    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
         return convertCurrency(stakedExpressedInSystemBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
     } else {
@@ -53,12 +53,42 @@ const stakedFiatValueBn = computed(() => {
 });
 
 // Second cell: Unstaking
-const unstakingFiatValueText = ref('$ 200.72');
-const unstakingBalanceBn = ref(stakedTokenBalanceBn);
+const unstakingBalanceBn = computed(() => {
+    const rexData = useRexStore().getRexData(label);
+    if (rexData) {
+        const totalBalance = rexData.balance;
+        const withdrawableBalance = rexData.withdrawable;
+        if (totalBalance && withdrawableBalance) {
+            return totalBalance.sub(withdrawableBalance);
+        } else {
+            return undefined;
+        }
+    } else {
+        return undefined;
+    }
+});
+const unstakingFiatValueBn = computed(() => {
+    if (unstakingBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(unstakingBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const isUnstakingLoading = computed(() => unstakingBalanceBn.value === undefined);
 
 // Third cell: Withdrawable
-const withdrawableFiatValueText = ref('$ 123.02');
-const withdrawableBalanceBn = ref(unstakedRatio);
+const withdrawableBalanceBn = computed(() => useRexStore().getRexData(label)?.withdrawable);
+const withdrawableFiatValueBn = computed(() => {
+    if (withdrawableBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(withdrawableBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const isWithdrawableLoading = computed(() => withdrawableBalanceBn.value === undefined);
+
 
 const apyPrittyPrint = computed(() => {
     const apy = chainStore.currentEvmChain?.apy;
@@ -72,8 +102,15 @@ const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref('10 days');
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
-const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
-const evmNetworkName = ref('Telos EVM');
+const tvlAmountBn = computed(() => {
+    const totalStaking = useRexStore().getRexData(label)?.totalStaking;
+    if (totalStaking) {
+        return totalStaking;
+    } else {
+        return undefined;
+    }
+});
+const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
 const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
@@ -86,16 +123,18 @@ const firstLineData = computed(() => [{
 }, {
     label: $t('evm_stake.unstaking_card_label'),
     tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
-    primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
+    primaryText: prettyPrintToken(unstakingFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isUnstakingLoading.value ? '' : prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
+    isPrimaryLoading: isUnstakingLoading.value,
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.withdrawable_card_label'),
     tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
-    primaryText: withdrawableFiatValueText.value,
-    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
+    primaryText: prettyPrintToken(withdrawableFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isWithdrawableLoading.value ? '' : prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
+    isPrimaryLoading: isWithdrawableLoading.value,
     useSmallBox: true,
 }]);
 

From 86c0eee2e7188a3d5f2072864414b4b30ae90d44 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 25 Aug 2023 13:52:12 -0400
Subject: [PATCH 023/268] WIP add fetch transfers method

---
 src/antelope/chains/EVMChainSettings.ts       |  54 ++++++-
 src/antelope/stores/account.ts                |   2 +
 src/antelope/stores/history.ts                | 133 +++++++++++-------
 src/antelope/stores/nfts.ts                   |   2 +-
 src/antelope/types/EvmTransaction.ts          |  20 +++
 src/antelope/types/Filters.ts                 |  11 ++
 src/pages/evm/nfts/NftDetailsCard.vue         |   2 +-
 src/pages/evm/wallet/WalletPage.vue           |  12 +-
 .../evm/wallet/WalletTransactionsTab.vue      |   1 +
 9 files changed, 177 insertions(+), 60 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index fc8524d7f..064942866 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -22,6 +22,8 @@ import {
     NFTContractClass,
     IndexerNftItemResult,
     NFTItemClass,
+    IndexerTransfersFilter,
+    IndexerAccountTransfersResponse,
 } from 'src/antelope/types';
 import EvmContract from 'src/antelope/stores/utils/contracts/EvmContract';
 import { ethers } from 'ethers';
@@ -371,7 +373,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     }
 
     async getEVMTransactions(filter: IndexerTransactionsFilter): Promise<IndexerAccountTransactionsResponse> {
-        const address = filter.address;
+        const address = '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607'; // eztodo undo
         const limit = filter.limit;
         const offset = filter.offset;
         const includeAbi = filter.includeAbi;
@@ -379,11 +381,8 @@ export default abstract class EVMChainSettings implements ChainSettings {
         const includePagination = true;
         const logTopic = filter.logTopic;
         const full = filter.full ?? true;
-        const type = filter.type;
 
-        let aux = {
-            type,
-        } as Record<string, unknown>;
+        let aux = {};
 
         if (limit !== undefined) {
             aux = { limit, ...aux };
@@ -417,6 +416,51 @@ export default abstract class EVMChainSettings implements ChainSettings {
             .then(response => response.data as IndexerAccountTransactionsResponse);
     }
 
+    async getEVMTransfers({
+        account,
+        type,
+        limit,
+        offset,
+        includePagination,
+        endBlock,
+        startBlock,
+        contract,
+        includeAbi,
+    }: IndexerTransfersFilter): Promise<IndexerAccountTransfersResponse> {
+        let aux = {};
+
+        if (limit !== undefined) {
+            aux = { limit, ...aux };
+        }
+        if (offset !== undefined) {
+            aux = { offset, ...aux };
+        }
+        if (includeAbi !== undefined) {
+            aux = { includeAbi, ...aux };
+        }
+        if (type !== undefined) {
+            aux = { type, ...aux };
+        }
+        if (includePagination !== undefined) {
+            aux = { includePagination, ...aux };
+        }
+        if (endBlock !== undefined) {
+            aux = { endBlock, ...aux };
+        }
+        if (startBlock !== undefined) {
+            aux = { startBlock, ...aux };
+        }
+        if (contract !== undefined) {
+            aux = { contract, ...aux };
+        }
+
+        const params = aux as AxiosRequestConfig;
+        const url = 'v1/account/0x13B745FC35b0BAC9bab9fD20B7C9f46668232607/transfers'; // eztodo revert address
+
+        return this.indexer.get(url, { params })
+            .then(response => response.data as IndexerAccountTransfersResponse);
+    }
+
     async getTokenList(): Promise<TokenClass[]> {
         if (this.tokenListPromise) {
             return this.tokenListPromise;
diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index d6cfd4120..5ef0f52df 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -156,6 +156,7 @@ export const useAccountStore = defineStore(store_name, {
         async loginEVM({ authenticator, network }: LoginEVMActionData): Promise<boolean> {
             this.trace('loginEVM', network);
             useHistoryStore().clearEvmTransactions();
+            useHistoryStore().clearEVMTansfers();
             useBalancesStore().clearBalances();
             useNftsStore().clearNFTs();
 
@@ -206,6 +207,7 @@ export const useAccountStore = defineStore(store_name, {
         async logout() {
             this.trace('logout');
             useHistoryStore().clearEvmTransactions();
+            useHistoryStore().clearEVMTansfers();
             useBalancesStore().clearBalances();
             useNftsStore().clearNFTs();
 
diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 7c86c3c91..be2540189 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -24,16 +24,16 @@ import {
     EvmTransaction,
     AntelopeError,
     IndexerTransactionsFilter,
+    ShapedTransactionRow,
     ParsedIndexerAccountTransactionsContract,
     EVMTransactionsPaginationData,
     TransactionValueData,
     EvmSwapFunctionNames,
-    ShapedErc20TransactionRow,
-    ShapedNftTransactionRow,
-    ShapedTransactionRow,
+    EvmTransfer,
 } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { useChainStore } from 'src/antelope/stores/chain';
+import { toRaw } from 'vue';
 import { BigNumber } from 'ethers';
 import { getAntelope, useContractStore, useUserStore } from '..';
 import { formatUnits } from 'ethers/lib/utils';
@@ -41,7 +41,7 @@ import { getGasInTlos, WEI_PRECISION } from 'src/antelope/stores/utils';
 import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { getFiatPriceFromIndexer } from 'src/api/price';
 
-
+export const transfers_filter_limit = 10000;
 
 export interface HistoryState {
     __evm_filter: IndexerTransactionsFilter;
@@ -54,22 +54,26 @@ export interface HistoryState {
         [label: Label]: number,
     },
     __shaped_evm_transaction_rows: {
-        [label: Label]: (ShapedErc20TransactionRow | ShapedNftTransactionRow)[],
+        [label: Label]: ShapedTransactionRow[],
     };
     __evm_transactions_pagination_data: {
         [label: Label]: EVMTransactionsPaginationData,
     },
+    __evm_transfers: {
+        [label: Label]: {
+            transfers: EvmTransfer[],
+        },
+    },
 }
 
 const store_name = 'history';
-const max_response_transactions = 5000;
 
 export const useHistoryStore = defineStore(store_name, {
     state: (): HistoryState => (historyInitialState),
     getters: {
         getEVMTransactions: state => (label: Label): EvmTransaction[] => state.__evm_transactions[label].transactions,
         getEVMTransactionsFilter: state => state.__evm_filter,
-        getShapedTransactionRows: state => (label: Label): (ShapedErc20TransactionRow | ShapedNftTransactionRow)[] => state.__shaped_evm_transaction_rows[label],
+        getShapedTransactionRows: state => (label: Label): ShapedTransactionRow[] => state.__shaped_evm_transaction_rows[label],
         getEVMTransactionsPagination: state => (label: Label): EVMTransactionsPaginationData => state.__evm_transactions_pagination_data[label],
         getEvmTransactionsRowCount: state => (label: Label): number => state.__total_evm_transaction_count[label],
     },
@@ -98,43 +102,16 @@ export const useHistoryStore = defineStore(store_name, {
             feedbackStore.setLoading('history.fetchEVMTransactionsForAccount');
 
             try {
-                // eztodo make UI element to indicate more than 5000 txs?
-                const filter = {
-                    // address: this.__evm_filter.address, // eztodo clean up filter object
-                    address: '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607',
-                    limit: max_response_transactions,
-                    offset: 0,
-                    includeAbi: true,
-                    includePagination: true,
-                };
-
-                const responseErc20   = await chain_settings.getEVMTransactions({
-                    ...filter,
-                    type: 'erc20',
-                });
-                const responseErc721 = await chain_settings.getEVMTransactions({
-                    ...filter,
-                    type: 'erc721',
-                });
-                const responseErc1155 = await chain_settings.getEVMTransactions({
-                    ...filter,
-                    type: 'erc1155',
-                });
+                // eztodo erc1155 are not returned by indexer for nft detail page
+                if (!this.__evm_transfers[label].transfers.length) {
+                    await this.fetchEVMTransfersForAccount(label);
+                }
+
+                const response = await chain_settings.getEVMTransactions(toRaw(this.__evm_filter));
+                const contracts = response.contracts;
+                const transactions = response.results;
 
-                const contracts = {
-                    ...responseErc20.contracts,
-                    ...responseErc721.contracts,
-                    ...responseErc1155.contracts,
-                };
-                const transactions = [
-                    ...responseErc20.results,
-                    ...responseErc721.results,
-                    ...responseErc1155.results,
-                ].sort((a, b) => b.timestamp - a.timestamp); // eztodo verify that this sort is correct
-
-                // eztodo for some reason, all results objects are the same
-                debugger;
-                this.setEvmTransactionsRowCount(label, transactions.length);
+                this.setEvmTransactionsRowCount(label, response.total_count);
 
                 const contractAddresses = Object.keys(contracts);
                 const parsedContracts: Record<string, ParsedIndexerAccountTransactionsContract> = {};
@@ -166,6 +143,47 @@ export const useHistoryStore = defineStore(store_name, {
             }
         },
 
+        // fetch all token transfers for an account (erc20, erc721, erc155)
+        // eztodo pass in token type?
+        async fetchEVMTransfersForAccount(label: Label = 'current'): Promise<void> {
+            const feedbackStore = useFeedbackStore();
+
+            this.trace('fetchEVMTransfersForAccount', label);
+            feedbackStore.setLoading('history.fetchEVMTransfersForAccount');
+
+            const chainSettings = useChainStore().getChain(label).settings as EVMChainSettings;
+
+            try {
+                const [
+                    erc20TransferResponse,
+                    erc721TransferResponse,
+                    erc1155TransferResponse,
+                ] = await Promise.all(['erc20', 'erc721', 'erc1155'].map(
+                    type => chainSettings.getEVMTransfers({
+                        includePagination: true,
+                        account: this.__evm_filter.address,
+                        limit: transfers_filter_limit,
+                        type: type as 'erc20' | 'erc721' | 'erc1155',
+                    }),
+                ));
+                const transfers = [
+                    ...erc20TransferResponse.results,
+                    ...erc721TransferResponse.results,
+                    ...erc1155TransferResponse.results,
+                ];
+
+                transfers.sort((a, b) => b.timestamp - a.timestamp);
+
+                this.setEVMTransfers(label, transfers);
+            } catch (error) {
+                this.clearEVMTansfers();
+                // eztodo this error localization
+                throw new AntelopeError('antelope.history.error_fetching_transfers');
+            } finally {
+                feedbackStore.unsetLoading('history.fetchEVMTransfersForAccount');
+            }
+        },
+
         async shapeTransactions(label: Label = 'current', transactions: EvmTransaction[]) {
             this.trace('shapeTransactions', label);
             const feedbackStore = useFeedbackStore();
@@ -177,6 +195,13 @@ export const useHistoryStore = defineStore(store_name, {
             const chainSettings = (chain.settings as EVMChainSettings);
             const tlosInUsd = await chainSettings.getUsdPrice();
 
+            // eztodo perhaps i can get all transfers (erc20, erc1155, erc721) then check each transaction hash against the list of transfers. if there is a match,
+            // i can then call the NFT endpoint to get the token info. 3 issues: each of the transfers calls takes a long time, so they need to be gotten at some point
+            // in the background. also the transfers list can become stale, so they need to be refetched periodically. also, each transfers call needs a limit (say, 5000) or the
+            // response may be way too large. if the user goes far enough back in their tx history, they will eventually hit a point where the transactions exceed the transfers
+            // this request https://api.teloscan.io/v1/account/0x13B745FC35b0BAC9bab9fD20B7C9f46668232607/transfers?type=erc721&limit=9999999&offset=0&includePagination=false&includeAbi=false
+            // response is 70kb and took 2 seconds
+
             transactions.forEach(async (tx) => {
                 const index = transactions.findIndex(t => t.hash === tx.hash);
 
@@ -215,7 +240,7 @@ export const useHistoryStore = defineStore(store_name, {
 
                 if (!isFailed) {
                     if (+tx.value) {
-                        // eztodo should i be using WEI_PRECISION here?
+                        // eztodo change from WEI_PRECISION to token decimals
                         const valueInFiatBn = convertCurrency(BigNumber.from(tx.value), WEI_PRECISION, 2, tlosInUsd);
                         const valueInFiat = +formatUnits(valueInFiatBn, 2);
 
@@ -302,11 +327,8 @@ export const useHistoryStore = defineStore(store_name, {
                     failed: isFailed,
                 } as ShapedTransactionRow;
 
-                console.log(shapedTx);
-
-
                 // The shapedTxs may not be in the same order as the transactions
-                // this.__shaped_evm_transaction_rows[label][index] = shapedTx;
+                this.__shaped_evm_transaction_rows[label][index] = shapedTx;
 
                 feedbackStore.unsetLoading(loadingFlag);
             });
@@ -322,7 +344,7 @@ export const useHistoryStore = defineStore(store_name, {
             this.trace('setTransactions', label, transactions);
             useHistoryStore().__evm_transactions[label].transactions = transactions;
         },
-        setShapedTransactionRows(label: Label, transactions: (ShapedErc20TransactionRow | ShapedNftTransactionRow)[]) {
+        setShapedTransactionRows(label: Label, transactions: ShapedTransactionRow[]) {
             this.trace('setShapedTransactionRows', transactions);
             this.__shaped_evm_transaction_rows[label] = transactions;
         },
@@ -337,6 +359,14 @@ export const useHistoryStore = defineStore(store_name, {
             this.setShapedTransactionRows('current', []);
             this.setEvmTransactionsRowCount('current', 0);
         },
+        setEVMTransfers(label: Label, transfers: EvmTransfer[]) {
+            this.trace('setEVMTransfers', transfers);
+            this.__evm_transfers[label].transfers = transfers;
+        },
+        clearEVMTansfers() {
+            this.trace('clearEVMTansfers');
+            this.setEVMTransfers('current', []);
+        },
     },
 });
 
@@ -356,4 +386,9 @@ const historyInitialState: HistoryState = {
         current: [],
     },
     __evm_transactions_pagination_data: {},
+    __evm_transfers: {
+        current: {
+            transfers: [],
+        },
+    },
 };
diff --git a/src/antelope/stores/nfts.ts b/src/antelope/stores/nfts.ts
index 3703d2d14..2ab4d73b0 100644
--- a/src/antelope/stores/nfts.ts
+++ b/src/antelope/stores/nfts.ts
@@ -132,7 +132,7 @@ export const useNftsStore = defineStore(store_name, {
                 return;
             }
 
-            const owner = account.account;
+            const owner = '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607';
 
             // we initialize the inventory for this label or take the existing one
             this.__inventory[label] = this.__inventory[label] || {
diff --git a/src/antelope/types/EvmTransaction.ts b/src/antelope/types/EvmTransaction.ts
index 57aae8b3f..7ea652214 100644
--- a/src/antelope/types/EvmTransaction.ts
+++ b/src/antelope/types/EvmTransaction.ts
@@ -132,3 +132,23 @@ export interface TransactionResponse {
 export interface NativeTransactionResponse extends TransactionResponse {
     __?: string;
 }
+
+export interface IndexerAccountTransfersResponse {
+    contracts: {
+        [contractHash: string]: IndexerAccountTransactionsContractData
+    };
+    results: EvmTransfer[]
+    total_count?: number; // included if includePagination is true in the request
+    more?: boolean; // included if includePagination is true in the request
+}
+
+export interface EvmTransfer {
+    amount: string, // a string representing an integer
+    contract: string, // contract address of the token being transferred
+    blockNumber: number, // an integer representing the block number of the transfer
+    from: string, // address of the sender
+    to: string; // address of the receiver
+    type: 'erc20' | 'erc721' | 'erc1155', // type of token being transferred
+    transaction: string; // transaction hash
+    timestamp: number; // integer representing ms from epoch
+}
diff --git a/src/antelope/types/Filters.ts b/src/antelope/types/Filters.ts
index 0117b75b7..265ef4036 100644
--- a/src/antelope/types/Filters.ts
+++ b/src/antelope/types/Filters.ts
@@ -28,5 +28,16 @@ export interface IndexerTransactionsFilter {
     logTopic?: string; // match to the transaction logs' first topic
     full?: string; // Add internal transactions to the response
     forceMetadata?: number; // 1 to force metadata to be returned
+}
+
+export interface IndexerTransfersFilter {
+    account: string;
     type?: 'erc20' | 'erc721' | 'erc1155'; // filter by token type
+    limit?: number; // integer value to limit number of results
+    offset?: number; // integer value to offset the results of the query
+    includePagination?: boolean; // include the total count and more flag in response
+    endBlock?: number; // last block to include in the query
+    startBlock?: number; // first block to include in the query
+    contract?: string; // filter by contract address
+    includeAbi?: boolean; // indicate whether to include abi
 }
diff --git a/src/pages/evm/nfts/NftDetailsCard.vue b/src/pages/evm/nfts/NftDetailsCard.vue
index d814efc6b..b24f87756 100644
--- a/src/pages/evm/nfts/NftDetailsCard.vue
+++ b/src/pages/evm/nfts/NftDetailsCard.vue
@@ -17,7 +17,7 @@ const props = defineProps<{
 
 .c-nft-details-card {
     border-radius: 4px;
-    border: 1px solid var(--header-item-outline-color);
+    border: 1px solid var(--accent-color-3);
     background-color: var(--bg-color);
     padding: 16px;
     word-break: break-word;
diff --git a/src/pages/evm/wallet/WalletPage.vue b/src/pages/evm/wallet/WalletPage.vue
index c1caa13af..2a709b132 100644
--- a/src/pages/evm/wallet/WalletPage.vue
+++ b/src/pages/evm/wallet/WalletPage.vue
@@ -35,16 +35,20 @@ watch(allBalances, (newBalances: TokenBalance[]) => {
 
 }, { deep: true, immediate: true });
 
-watch(accountStore.currentEvmAccount, (newAccount) => {
-    // if user is on the balances screen, prefetch transactions
-    if (accountStore.currentEvmAccount?.address && route.query.tab !== 'transactions') {
+watch(accountStore, (newAccountStoreState) => {
+    const newAccount = newAccountStoreState.loggedEvmAccount;
+    console.log('newAccount', newAccount);
+
+    // if user is on the balances screen, prefetch transactions & transfers
+    if (newAccount?.address && route.query.tab !== 'transactions') {
         historyStore.setEVMTransactionsFilter({
-            address: accountStore.currentEvmAccount?.address,
+            address: newAccount.address,
             offset: 0,
             limit: 5,
             includeAbi: true,
         });
         historyStore.fetchEVMTransactionsForAccount('current');
+        historyStore.fetchEVMTransfersForAccount('current');
     }
 }, { immediate: true });
 
diff --git a/src/pages/evm/wallet/WalletTransactionsTab.vue b/src/pages/evm/wallet/WalletTransactionsTab.vue
index b8b61c7c1..53fc85094 100644
--- a/src/pages/evm/wallet/WalletTransactionsTab.vue
+++ b/src/pages/evm/wallet/WalletTransactionsTab.vue
@@ -76,6 +76,7 @@ export default defineComponent({
             this.hideLoadingState = true;
         }
 
+        // eztodo add interval for transfers
         this.fetchTransactionsInterval = setInterval(() => {
             if (this.doLiveUpdate) {
                 this.hideLoadingState = true;

From 138bc80afcaf321c6fe925debf1fa92a341170ad Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 25 Aug 2023 19:15:41 -0400
Subject: [PATCH 024/268] WIP add debounce util, fetch transfers with txs

---
 src/antelope/chains/EVMChainSettings.ts       |  2 +
 src/antelope/stores/utils/store-utils.ts      | 68 +++++++++++++
 src/pages/evm/wallet/WalletPage.vue           |  6 +-
 .../evm/wallet/WalletTransactionsTab.vue      | 11 ++-
 .../antelope/stores/utils/store-utils.spec.ts | 97 +++++++++++++++++++
 5 files changed, 179 insertions(+), 5 deletions(-)
 create mode 100644 src/antelope/stores/utils/store-utils.ts
 create mode 100644 test/jest/__tests__/antelope/stores/utils/store-utils.spec.ts

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 064942866..fa61ebf03 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -427,6 +427,8 @@ export default abstract class EVMChainSettings implements ChainSettings {
         contract,
         includeAbi,
     }: IndexerTransfersFilter): Promise<IndexerAccountTransfersResponse> {
+        console.log(account); // eztodo remove this
+
         let aux = {};
 
         if (limit !== undefined) {
diff --git a/src/antelope/stores/utils/store-utils.ts b/src/antelope/stores/utils/store-utils.ts
new file mode 100644
index 000000000..28ced8bcb
--- /dev/null
+++ b/src/antelope/stores/utils/store-utils.ts
@@ -0,0 +1,68 @@
+
+/**
+ * Creates and returns a debounced version of the provided asynchronous function.
+ * The debounced function delays invoking the function until after `wait` milliseconds have passed since the last time the debounced function was invoked.
+ * Multiple calls within the same "debounce window" will resolve to the same value.
+ *
+ * @template Context The `this` context the function will be invoked with.
+ * @template Args The argument types for the function.
+ * @template FnReturnType The return type for the function.
+ *
+ * @param {(...args: Args) => Promise<FnReturnType> | FnReturnType} func - The function to debounce. Can return a Promise or a value.
+ * @param {number} wait - The number of milliseconds to delay.
+ *
+ * @throws {Error} If `wait` is not a positive integer.
+ *
+ * @returns {(...args: Args) => Promise<FnReturnType>} A debounced function.
+ *
+ * @example
+ * let callCounter = 0;
+ *
+ * function fetchSomeData(address: string) {
+ *     callCounter++;
+ *     return Promise.resolve(address);
+ * }
+ *
+ * const debouncedFetchSomeData = debounceAsync(fetchSomeData, 1000);
+ * const callOne = debouncedFetchSomeData('abc');
+ * const callTwo = debouncedFetchSomeData('xyz');
+ * const callOneResult = await callOne;
+ * const callTwoResult = await callTwo;
+ * console.log(callOneResult); // 'xyz'
+ * console.log(callTwoResult); // 'xyz'
+ * console.log(callCounter); // 1
+ */
+export function debounceAsync<Context, Args extends Array<unknown>, FnReturnType>(
+    func: (...args: Args) => Promise<FnReturnType> | FnReturnType,
+    wait: number,
+): (...args: Args) => Promise<FnReturnType> {
+
+    if (wait % 1 !== 0 || wait <= 0) {
+        throw new Error('Invalid wait time. Wait time must be a positive integer.');
+    }
+
+    let timeout: NodeJS.Timeout | undefined;
+    let pendingResolves: Array<(value: FnReturnType) => void> = [];
+
+    return function (this: Context, ...args: Args): Promise<FnReturnType> {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const context = this;
+        clearTimeout(timeout);
+
+        return new Promise<FnReturnType>((resolve) => {
+            pendingResolves.push(resolve);
+
+            timeout = setTimeout(async () => {
+                const result = await func.apply(context, args);
+
+                // Resolve all pending promises
+                for (const pendingResolve of pendingResolves) {
+                    pendingResolve(result);
+                }
+
+                // Clear the pendingResolves array
+                pendingResolves = [];
+            }, wait);
+        });
+    };
+}
diff --git a/src/pages/evm/wallet/WalletPage.vue b/src/pages/evm/wallet/WalletPage.vue
index 2a709b132..787d29684 100644
--- a/src/pages/evm/wallet/WalletPage.vue
+++ b/src/pages/evm/wallet/WalletPage.vue
@@ -37,7 +37,6 @@ watch(allBalances, (newBalances: TokenBalance[]) => {
 
 watch(accountStore, (newAccountStoreState) => {
     const newAccount = newAccountStoreState.loggedEvmAccount;
-    console.log('newAccount', newAccount);
 
     // if user is on the balances screen, prefetch transactions & transfers
     if (newAccount?.address && route.query.tab !== 'transactions') {
@@ -47,8 +46,9 @@ watch(accountStore, (newAccountStoreState) => {
             limit: 5,
             includeAbi: true,
         });
-        historyStore.fetchEVMTransactionsForAccount('current');
-        historyStore.fetchEVMTransfersForAccount('current');
+        historyStore.fetchEVMTransfersForAccount('current').then(() => {
+            historyStore.fetchEVMTransactionsForAccount('current');
+        });
     }
 }, { immediate: true });
 
diff --git a/src/pages/evm/wallet/WalletTransactionsTab.vue b/src/pages/evm/wallet/WalletTransactionsTab.vue
index 53fc85094..0b710208c 100644
--- a/src/pages/evm/wallet/WalletTransactionsTab.vue
+++ b/src/pages/evm/wallet/WalletTransactionsTab.vue
@@ -36,7 +36,10 @@ export default defineComponent({
             return this.shapedTransactions.map(tx => tx.id);
         },
         loading() {
-            return feedbackStore.isLoading('history.fetchEVMTransactionsForAccount') && !this.hideLoadingState;
+            // eztodo when loading balances tab then clicking transactions tab, it says "showing 5 of 0 transactions"
+            const txLoading = feedbackStore.isLoading('history.fetchEVMTransactionsForAccount');
+            const transfersLoading = feedbackStore.isLoading('history.fetchEVMTransfersForAccount');
+            return (txLoading || transfersLoading) && !this.hideLoadingState;
         },
         address() {
             return accountStore.loggedEvmAccount?.address ?? '';
@@ -62,6 +65,7 @@ export default defineComponent({
         shapedTransactions(newValue) {
             this.pagination.rowsNumber = newValue.length;
         },
+        // eztodo debounce fetch tx
         address() {
             // address can be initially undefined; wait to load txs until it's defined
             // also reload txs if the user switches accounts
@@ -79,7 +83,9 @@ export default defineComponent({
         // eztodo add interval for transfers
         this.fetchTransactionsInterval = setInterval(() => {
             if (this.doLiveUpdate) {
-                this.hideLoadingState = true;
+                if (this.shapedTransactions.length > 0) {
+                    this.hideLoadingState = true;
+                }
 
                 this.getTransactions().finally(() => {
                     this.enableLoadingState();
@@ -128,6 +134,7 @@ export default defineComponent({
                     includeAbi: true,
                 });
                 try {
+                    await historyStore.fetchEVMTransfersForAccount('current');
                     await historyStore.fetchEVMTransactionsForAccount('current');
                     this.pagination.rowsNumber = historyStore.getEvmTransactionsRowCount('current');
                 } catch (e) {
diff --git a/test/jest/__tests__/antelope/stores/utils/store-utils.spec.ts b/test/jest/__tests__/antelope/stores/utils/store-utils.spec.ts
new file mode 100644
index 000000000..73c393860
--- /dev/null
+++ b/test/jest/__tests__/antelope/stores/utils/store-utils.spec.ts
@@ -0,0 +1,97 @@
+import { debounceAsync } from 'src/antelope/stores/utils/store-utils';
+
+describe('debounceAsync', () => {
+    let asyncMethodCallCounter = 0;
+    let synchronousMethodCallCounter = 0;
+    const returnValue = 'resolved';
+
+    // this method represents an async method, like a network request, which will be called from within
+    // a function we want to debounce, such as a store action which fetches data
+    function someAsyncMethod(param: string): Promise<string> {
+        return new Promise((resolve) => {
+            asyncMethodCallCounter++;
+            resolve(returnValue.concat(param));
+        });
+    }
+
+    // this method represents a synchronous method, like a getter, which will be called from within
+    // a function we want to debounce, such as a store getter which returns data
+    function someNonAsyncMethod(param: string): string {
+        synchronousMethodCallCounter++;
+        return returnValue.concat(param);
+    }
+
+    beforeAll(() => {
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.clearAllTimers();
+        asyncMethodCallCounter = 0;
+    });
+
+    afterAll(() => {
+        jest.useRealTimers();
+    });
+
+    it('should throw an error if the wait time is not a positive integer', () => {
+        const errorMessage = 'Invalid wait time. Wait time must be a positive integer.';
+        expect(() => debounceAsync(someAsyncMethod, -1)).toThrow(errorMessage);
+        expect(() => debounceAsync(someAsyncMethod, 0)).toThrow(errorMessage);
+        expect(() => debounceAsync(someAsyncMethod, 1.5)).toThrow(errorMessage);
+    });
+
+    it('should prevent a function from being called more than once within the specified timeframe', async () => {
+        const debouncedMethod = debounceAsync(someAsyncMethod, 1000);
+
+        // this is the first call to the debounced method; this call should be debounced (i.e. the async method should not be called)
+        // because the second call below to the debounced method is made within the specified timeframe
+        const firstCall = debouncedMethod('one');
+
+        // advance timer by 100ms, which is still within the specified debounce timeframe
+        // so, the async method should have been called yet
+        jest.advanceTimersByTime(100);
+        expect(asyncMethodCallCounter).toBe(0);
+
+        // this is the second call to the debounced method; this call should also be debounced (i.e. the async method should not be called)
+        const secondCall = debouncedMethod('two');
+        jest.advanceTimersByTime(100);
+        expect(asyncMethodCallCounter).toBe(0);
+
+        // this call will be the last one before the debounce timeframe expires, so the async method should be called 1000ms after it is called
+        const thirdCall = debouncedMethod('three');
+        jest.advanceTimersByTime(100);
+        // 1000ms have not yet passed, so the async method should not have been called yet
+        expect(asyncMethodCallCounter).toBe(0);
+
+        jest.advanceTimersByTime(1000);
+        // 1000ms have passed, so the async method should have been called once
+        expect(asyncMethodCallCounter).toBe(1);
+
+        // ultimately, all of the promises should resolve to the same value - the value passed to the last call to the debounced method
+        expect(await firstCall).toBe(returnValue.concat('three'));
+        expect(await secondCall).toBe(returnValue.concat('three'));
+        expect(await thirdCall).toBe(returnValue.concat('three'));
+    });
+
+    it('should return correctly even if the function provided is not asynchronous', async () => {
+        const debouncedMethod = debounceAsync(someNonAsyncMethod, 1000);
+        const firstCall = debouncedMethod('one');
+        jest.advanceTimersByTime(100);
+
+        // the synchronous method should not have been called yet, because the debounce timeframe has not yet expired
+        expect(synchronousMethodCallCounter).toBe(0);
+
+        const secondCall = debouncedMethod('two');
+        jest.advanceTimersByTime(100);
+        // the synchronous method should not have been called yet, because the debounce timeframe has not yet expired
+        expect(synchronousMethodCallCounter).toBe(0);
+
+        jest.advanceTimersByTime(3000);
+        // the synchronous method should have been called once, because the debounce timeframe has expired
+        expect(synchronousMethodCallCounter).toBe(1);
+
+        expect(await firstCall).toBe(returnValue.concat('two'));
+        expect(await secondCall).toBe(returnValue.concat('two'));
+    });
+});

From 34cc4fa9dbb5961fb3ce7ee1238f128ea7d85985 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Mon, 28 Aug 2023 12:43:41 -0400
Subject: [PATCH 025/268] update debounceAsync

---
 src/antelope/stores/utils/store-utils.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/antelope/stores/utils/store-utils.ts b/src/antelope/stores/utils/store-utils.ts
index 28ced8bcb..5135536d1 100644
--- a/src/antelope/stores/utils/store-utils.ts
+++ b/src/antelope/stores/utils/store-utils.ts
@@ -33,7 +33,7 @@
  * console.log(callCounter); // 1
  */
 export function debounceAsync<Context, Args extends Array<unknown>, FnReturnType>(
-    func: (...args: Args) => Promise<FnReturnType> | FnReturnType,
+    func: (this: Context, ...args: Args) => Promise<FnReturnType> | FnReturnType,
     wait: number,
 ): (...args: Args) => Promise<FnReturnType> {
 
@@ -56,12 +56,14 @@ export function debounceAsync<Context, Args extends Array<unknown>, FnReturnType
                 const result = await func.apply(context, args);
 
                 // Resolve all pending promises
-                for (const pendingResolve of pendingResolves) {
-                    pendingResolve(result);
-                }
+                pendingResolves.forEach(pendingResolve => pendingResolve(result));
 
                 // Clear the pendingResolves array
                 pendingResolves = [];
+
+                // clean up the timeout
+                clearTimeout(timeout);
+                timeout = undefined;
             }, wait);
         });
     };

From 9fc8c791677e331b3a3d0288383fc6b6bb3955ed Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Mon, 28 Aug 2023 18:50:54 -0500
Subject: [PATCH 026/268] fix: restore missing references

---
 src/antelope/stores/balances.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index bc9658fe0..f93fe5794 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -50,6 +50,7 @@ import {
 import { AccountModel, EvmAccountModel } from 'src/antelope/stores/account';
 import { EVMAuthenticator } from 'src/antelope/wallets';
 import { filter } from 'rxjs';
+import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
 
 export interface BalancesState {
     __balances:  { [label: Label]: TokenBalance[] };
@@ -181,6 +182,7 @@ export const useBalancesStore = defineStore(store_name, {
                 const chain_settings = chain.getChain(label).settings as EVMChainSettings;
                 const sysToken = chain_settings.getSystemToken();
                 const wrpToken = chain_settings.getWrappedSystemToken();
+                const stkToken = chain_settings.getStakedSystemToken();
 
                 // get the price for both system and wrapped tokens
                 const price = (await chain_settings.getUsdPrice()).toString();
@@ -188,7 +190,6 @@ export const useBalancesStore = defineStore(store_name, {
                 sysToken.market = new TokenMarketData(marketInfo);
                 wrpToken.market = new TokenMarketData(marketInfo);
 
-<<<<<<< HEAD
                 // Now we preview a deposit of 1 SYS to get the ratio
                 const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
 
@@ -210,8 +211,6 @@ export const useBalancesStore = defineStore(store_name, {
                     this.trace('updateSystemTokensPrices', `STLOS price: ${toRaw(stkMarketInfo)}`);
                 }
 
-=======
->>>>>>> dbe666228e35dd0f9ba957cf7cce88e1994272f4
             } catch (error) {
                 console.error(error);
                 // we won't thorw an error here, as it is not critical

From 958b7ab383d0d35be94e0ba45392b4381964e99f Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 10:19:53 -0300
Subject: [PATCH 027/268] addressing feedback

---
 src/antelope/chains/EVMChainSettings.ts     | 18 +++++++++++
 src/components/evm/ScrollableInfoCards.vue  |  6 +++-
 src/i18n/en-us/index.js                     |  7 +++--
 src/pages/evm/staking/StakingPageHeader.vue | 33 ++++++++++-----------
 4 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index b406f0d5d..d09580c80 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -364,6 +364,14 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return `${token.symbol}-${token.address}-${this.getNetwork()}`;
     }
 
+    /**
+     * This method returns the cached value for the requested contract which can be one of three values:
+     * - Promise<EvmContract> if the contract is already cached
+     * - Promise<null> if the contract was never requested before
+     * - Promise<false> if the contract was requested, not found and set as not existing (to avoid requesting it again)
+     * @param address contract requested
+     * @returns Promise for the requested contract or false if it doesn't exist
+     */
     async getContract(address: string): Promise<EvmContract | false | null> {
         const key = address.toLowerCase();
         const returnValue = this.contracts[key]?.promise ?? null;
@@ -378,6 +386,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return returnValue;
     }
 
+    /**
+     * This method adds a contract to the cache and resolves the promise for it
+     * @param address address of the contract
+     * @param contract contract instance to be cached
+     */
     addContract(address: string, contract: EvmContract) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
@@ -393,6 +406,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
         }
     }
 
+    /**
+     * This method sets a contract as not existing and resolves the promise to false for it.
+     * This is done to distinguish between a contract that was never requested before and one that was requested and not found.
+     * @param address address of the contract
+     */
     setContractAsNotExisting(address: string) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 2285e02cd..d05e600b5 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -26,7 +26,7 @@ const props = defineProps<{
         }"
     >
         <div class="c-scrollable-info-cards__card-header">
-            <h5 class="u-text--low-contrast">
+            <h5 class="c-scrollable-info-cards__card-header-label u-text--low-contrast">
                 {{ card.label }}
             </h5>
 
@@ -110,5 +110,9 @@ const props = defineProps<{
         justify-content: space-between;
         margin-bottom: 4px;
     }
+
+    &__card-header-label {
+        white-space: nowrap;
+    }
 }
 </style>
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index cf3eb47f0..4a11bdad8 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -190,7 +190,7 @@ export default {
         unwrap_input_label: 'Unwrapping Amount',
     },
     evm_stake: {
-        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdrawable {token}',
         staked_card_label: 'Staked {symbol}',
         staked_card_tooltip: 'Staked tokens:\n\n' +
         'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
@@ -201,8 +201,8 @@ export default {
         'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
-        withdrawable_card_label: 'Withdraw-able',
-        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        withdrawable_card_label: 'withdrawable',
+        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
@@ -218,6 +218,7 @@ export default {
         tvl_card_label: 'TVL',
         tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
+        unstaking_period: '10 days',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 934008060..17500dade 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -17,9 +17,6 @@ const userStore = useUserStore();
 const balancesStore = useBalancesStore();
 const chainStore = useChainStore();
 const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
-// data
-const loading = ref(true);
-
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
@@ -27,7 +24,6 @@ const fiatCurrency = computed(() => userStore.fiatCurrency);
 const systemToken = chainSettings.getSystemToken();
 const stakedToken = chainSettings.getStakedSystemToken();
 
-const totalFiatValueText = ref('$ 4,324.35');
 
 // First cell: Staked
 const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
@@ -36,7 +32,6 @@ const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined
 const stakedExpressedInSystemBalanceBn = computed(() => {
     if (stakedTokenBalanceBn.value && !unstakedRatio.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(unstakedRatio.value, stakedToken.decimals);
-        console.log('ratioNumber', ratioNumber);
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -99,7 +94,7 @@ const apyPrittyPrint = computed(() => {
     }
 });
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
-const unlockPeriod = ref('10 days');
+const unlockPeriod = ref($t('evm_stake.unstaking_period'));
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
 const tvlAmountBn = computed(() => {
@@ -112,6 +107,14 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
+// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
+const totalFiatValueBn = computed(() => {
+    const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
+    const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
+    const withdrawableFiatValue = withdrawableFiatValueBn.value ?? BigNumber.from(0);
+    return stakedFiatValue.add(unstakingFiatValue).add(withdrawableFiatValue);
+});
+
 const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
     tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
@@ -159,20 +162,14 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
-
-// methods
-onBeforeMount(() => {
-    chainSettings.getUsdPrice().then((price) => {
-        // systemTokenPrice.value = price;
-    }).finally(() => {
-        loading.value = false;
-    });
-});
-
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
+    let decimals = symbol === fiatCurrency.value ? 2 : 4;
+    if (!amount || amount.isZero()) {
+        decimals = 1;
+    }
     return prettyPrintCurrency(
         amount ?? BigNumber.from(0),
-        4,
+        decimals,
         fiatLocale.value,
         false,
         symbol,
@@ -186,7 +183,7 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 <div class="c-staking-header">
     <div class="text-center q-mb-xl">
         <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
-        <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
+        <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />

From 63912e755b3e9b9cb3c0d42c28e7ceb78c95da1c Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 14:17:28 -0300
Subject: [PATCH 028/268] merging two functions into one

---
 src/antelope/chains/EVMChainSettings.ts | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index d09580c80..e229a303c 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -391,7 +391,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      * @param contract contract instance to be cached
      */
-    addContract(address: string, contract: EvmContract) {
+    addContract(address: string, contract: EvmContract | false) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
             this.contracts[key] = {
@@ -412,18 +412,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      */
     setContractAsNotExisting(address: string) {
-        const key = address.toLowerCase();
-        if (!this.contracts[key]) {
-            this.contracts[key] = {
-                promise: Promise.resolve(false),
-            };
-        } else {
-            if (this.contracts[key].resolve) {
-                this.contracts[key].resolve?.(false);
-            } else {
-                console.error('Error: Contract already exists', address);
-            }
-        }
+        return this.addContract(address, false);
     }
 
     async getEVMTransactions(filter: IndexerTransactionsFilter): Promise<IndexerAccountTransactionsResponse> {

From d77cc62f126014024d9726407e32636d06f7b846 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Tue, 29 Aug 2023 17:26:08 -0400
Subject: [PATCH 029/268] WIP broken

---
 src/antelope/stores/contract.ts               |  3 +-
 src/antelope/stores/history.ts                | 75 ++++++++++++++-----
 src/antelope/stores/utils/store-utils.ts      |  9 ++-
 src/antelope/types/EvmTransaction.ts          | 15 ++--
 src/pages/evm/wallet/WalletPage.vue           |  2 +-
 src/pages/evm/wallet/WalletTransactionRow.vue |  4 +-
 .../evm/wallet/WalletTransactionsTab.vue      |  6 +-
 7 files changed, 79 insertions(+), 35 deletions(-)

diff --git a/src/antelope/stores/contract.ts b/src/antelope/stores/contract.ts
index b0338a332..22875ee0d 100644
--- a/src/antelope/stores/contract.ts
+++ b/src/antelope/stores/contract.ts
@@ -79,7 +79,8 @@ export const useContractStore = defineStore(store_name, {
             return this.__processing[addressLower];
         },
 
-        async getTransfersFromTransaction(transaction: EvmTransaction): Promise<Erc20Transfer[]> {
+        // get transfer information from a transaction (ERC20 and native token only)
+        async getErc20TransfersFromTransaction(transaction: EvmTransaction): Promise<Erc20Transfer[]> {
             if (!transaction.logs || transaction.logs?.length === 0){
                 return [];
             }
diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index be2540189..41988548b 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -30,12 +30,13 @@ import {
     TransactionValueData,
     EvmSwapFunctionNames,
     EvmTransfer,
+    IndexerContractData,
 } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { useChainStore } from 'src/antelope/stores/chain';
 import { toRaw } from 'vue';
 import { BigNumber } from 'ethers';
-import { getAntelope, useContractStore, useUserStore } from '..';
+import { getAntelope, useContractStore, useNftsStore, useUserStore } from '..';
 import { formatUnits } from 'ethers/lib/utils';
 import { getGasInTlos, WEI_PRECISION } from 'src/antelope/stores/utils';
 import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
@@ -76,6 +77,7 @@ export const useHistoryStore = defineStore(store_name, {
         getShapedTransactionRows: state => (label: Label): ShapedTransactionRow[] => state.__shaped_evm_transaction_rows[label],
         getEVMTransactionsPagination: state => (label: Label): EVMTransactionsPaginationData => state.__evm_transactions_pagination_data[label],
         getEvmTransactionsRowCount: state => (label: Label): number => state.__total_evm_transaction_count[label],
+        getEVMTransfers: state => (label: Label): EvmTransfer[] => state.__evm_transfers[label].transfers,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -103,20 +105,22 @@ export const useHistoryStore = defineStore(store_name, {
 
             try {
                 // eztodo erc1155 are not returned by indexer for nft detail page
+                // for NFTs (ERC1155 and ERC721), we need to fetch information from the transfers endpoint,
+                // which returns data required for the UI
                 if (!this.__evm_transfers[label].transfers.length) {
-                    await this.fetchEVMTransfersForAccount(label);
+                    await this.fetchEvmNftTransfersForAccount(label, this.__evm_filter.address);
                 }
 
-                const response = await chain_settings.getEVMTransactions(toRaw(this.__evm_filter));
-                const contracts = response.contracts;
-                const transactions = response.results;
+                const transactionsResponse = await chain_settings.getEVMTransactions(toRaw(this.__evm_filter));
+                const contracts = transactionsResponse.contracts;
+                const transactions = transactionsResponse.results;
 
-                this.setEvmTransactionsRowCount(label, response.total_count);
+                this.setEvmTransactionsRowCount(label, transactionsResponse.total_count);
 
                 const contractAddresses = Object.keys(contracts);
                 const parsedContracts: Record<string, ParsedIndexerAccountTransactionsContract> = {};
                 contractAddresses.forEach((address: string) => {
-                    const extraInfo = JSON.parse(contracts[address].calldata);
+                    const extraInfo = JSON.parse(contracts[address]?.calldata ?? '{}');
                     parsedContracts[address] = {
                         ...contracts[address],
                         ...extraInfo,
@@ -143,10 +147,12 @@ export const useHistoryStore = defineStore(store_name, {
             }
         },
 
-        // fetch all token transfers for an account (erc20, erc721, erc155)
+        // fetch all NFT transfers for an account (erc721, erc155)
         // eztodo pass in token type?
-        async fetchEVMTransfersForAccount(label: Label = 'current'): Promise<void> {
+        async fetchEvmNftTransfersForAccount(label: Label, account: string): Promise<void> {
+            // eztodo verify account
             const feedbackStore = useFeedbackStore();
+            const contractStore = useContractStore();
 
             this.trace('fetchEVMTransfersForAccount', label);
             feedbackStore.setLoading('history.fetchEVMTransfersForAccount');
@@ -155,19 +161,37 @@ export const useHistoryStore = defineStore(store_name, {
 
             try {
                 const [
-                    erc20TransferResponse,
                     erc721TransferResponse,
                     erc1155TransferResponse,
-                ] = await Promise.all(['erc20', 'erc721', 'erc1155'].map(
+                ] = await Promise.all(['erc721', 'erc1155'].map(
                     type => chainSettings.getEVMTransfers({
                         includePagination: true,
-                        account: this.__evm_filter.address,
+                        account,
                         limit: transfers_filter_limit,
-                        type: type as 'erc20' | 'erc721' | 'erc1155',
+                        type: type as 'erc721' | 'erc1155',
                     }),
                 ));
+
+                const erc721Contracts = erc721TransferResponse.contracts;
+                const erc1155Contracts = erc1155TransferResponse.contracts;
+
+                [erc721Contracts, erc1155Contracts].forEach((contracts) => {
+                    const contractAddresses = Object.keys(contracts);
+                    const parsedContracts: Record<string, IndexerContractData> = {};
+                    contractAddresses.forEach((address: string) => {
+                        const extraInfo = JSON.parse(contracts[address]?.calldata ?? '{}');
+
+                        parsedContracts[address] = {
+                            ...contracts[address],
+                            ...extraInfo,
+                        };
+                    });
+                    contractAddresses.forEach((address) => {
+                        contractStore.addContractToCache(address, parsedContracts[address]);
+                    });
+                });
+
                 const transfers = [
-                    ...erc20TransferResponse.results,
                     ...erc721TransferResponse.results,
                     ...erc1155TransferResponse.results,
                 ];
@@ -205,11 +229,13 @@ export const useHistoryStore = defineStore(store_name, {
             transactions.forEach(async (tx) => {
                 const index = transactions.findIndex(t => t.hash === tx.hash);
 
+                // eztodo is this actually done parallely?
                 // Each of these calls is a separate context, so we can do them in parallel
                 const loadingFlag = `history.shapeTransactions-${index}`;
                 feedbackStore.setLoading(loadingFlag);
 
-                const transfers = await contractStore.getTransfersFromTransaction(tx);
+                const erc20Transfers = await contractStore.getErc20TransfersFromTransaction(tx);
+                const nftTransfers = this.__evm_transfers[label].transfers;
                 const userAddressLower = this.__evm_filter.address.toLowerCase();
 
                 const gasUsedInTlosBn = BigNumber.from(tx.gasPrice).mul(tx.gasused);
@@ -260,7 +286,22 @@ export const useHistoryStore = defineStore(store_name, {
                         }
                     }
 
-                    for (const tokenXfer of transfers) {
+                    // eztodo for reference, a 721 tx : 0x893c7d83b2bef2758e3bed78ba2ca93a3102059f6c6da0d91aa58b6f1a62ab75
+                    const nftTransferIndex = nftTransfers.findIndex(t => t.transaction === tx.hash);
+                    const nftId = nftTransfers[nftTransferIndex]?.id;
+
+                    if (nftTransferIndex >= 0 && nftId !== undefined) {
+                        // transfer is an NFT transfer
+                        const nftDetails = await useNftsStore().fetchNftDetails(label, nftTransfers[nftTransferIndex].contract, nftId);
+                        console.log(nftDetails);
+
+                        // eztodo remove, pepegurl
+                        if (nftTransfers[nftTransferIndex].contract === '0x78cb091062cc8c32CD9c814599d1987b1dCc5093') {
+                            debugger;
+                        }
+                    }
+
+                    for (const tokenXfer of erc20Transfers) {
                         if (tokenXfer.symbol && tokenXfer.decimals) {
                             let transferAmountInFiat: number | undefined;
 
@@ -299,7 +340,7 @@ export const useHistoryStore = defineStore(store_name, {
 
                     if (isContractCreation) {
                         actionName = 'contractCreation';
-                    } else if (+tx.value && transfers.length === 0 && !functionName) {
+                    } else if (+tx.value && erc20Transfers.length === 0 && !functionName) {
                         if (tx.from?.toLowerCase() === userAddressLower) {
                             actionName = 'send';
                         } else if (tx.to?.toLowerCase() === userAddressLower) {
diff --git a/src/antelope/stores/utils/store-utils.ts b/src/antelope/stores/utils/store-utils.ts
index 5135536d1..854d64569 100644
--- a/src/antelope/stores/utils/store-utils.ts
+++ b/src/antelope/stores/utils/store-utils.ts
@@ -4,9 +4,9 @@
  * The debounced function delays invoking the function until after `wait` milliseconds have passed since the last time the debounced function was invoked.
  * Multiple calls within the same "debounce window" will resolve to the same value.
  *
- * @template Context The `this` context the function will be invoked with.
- * @template Args The argument types for the function.
- * @template FnReturnType The return type for the function.
+ * @template Context The type of the `this` context the function will be invoked with.
+ * @template Args The argument types for the function to be debounced.
+ * @template FnReturnType The return type for the function to be debounced.
  *
  * @param {(...args: Args) => Promise<FnReturnType> | FnReturnType} func - The function to debounce. Can return a Promise or a value.
  * @param {number} wait - The number of milliseconds to delay.
@@ -32,6 +32,7 @@
  * console.log(callTwoResult); // 'xyz'
  * console.log(callCounter); // 1
  */
+// eztodo document how this should be used in the context of a store or object, like with the function ()... rather than arrow function
 export function debounceAsync<Context, Args extends Array<unknown>, FnReturnType>(
     func: (this: Context, ...args: Args) => Promise<FnReturnType> | FnReturnType,
     wait: number,
@@ -41,7 +42,7 @@ export function debounceAsync<Context, Args extends Array<unknown>, FnReturnType
         throw new Error('Invalid wait time. Wait time must be a positive integer.');
     }
 
-    let timeout: NodeJS.Timeout | undefined;
+    let timeout: ReturnType<typeof setTimeout> | undefined;
     let pendingResolves: Array<(value: FnReturnType) => void> = [];
 
     return function (this: Context, ...args: Args): Promise<FnReturnType> {
diff --git a/src/antelope/types/EvmTransaction.ts b/src/antelope/types/EvmTransaction.ts
index 7ea652214..5bd0b28db 100644
--- a/src/antelope/types/EvmTransaction.ts
+++ b/src/antelope/types/EvmTransaction.ts
@@ -76,19 +76,17 @@ export interface ShapedTransactionRow {
     gasUsed?: number; // gas used in TLOS
     gasFiatValue?: number; // gas used in Fiat
     failed?: boolean;
-}
 
-export interface ShapedErc20TransactionRow extends ShapedTransactionRow {
+    // ERC20 data
     valuesIn: TransactionValueData[];
     valuesOut: TransactionValueData[];
-}
 
-export interface ShapedNftTransactionRow extends ShapedTransactionRow {
+    // ERC721 & ERC1155 data
     nftsIn: NftTransactionData[];
     nftsOut: NftTransactionData[];
 }
 
-export interface IndexerAccountTransactionsContractData {
+export interface IndexerContractData {
     symbol: string;
     creator: string;
     address: string;
@@ -104,7 +102,7 @@ export interface IndexerAccountTransactionsContractData {
     transaction: string; // creation tx for contract
 }
 
-export interface ParsedIndexerAccountTransactionsContract extends IndexerAccountTransactionsContractData {
+export interface ParsedIndexerAccountTransactionsContract extends IndexerContractData {
     price?: string; // string representation of number
     holders?: number;
     marketdata_updated?: string; // epoch
@@ -117,7 +115,7 @@ export interface EVMTransactionsPaginationData {
 
 export interface IndexerAccountTransactionsResponse {
     contracts: {
-        [contractHash: string]: IndexerAccountTransactionsContractData
+        [contractHash: string]: IndexerContractData
     };
     results: EvmTransaction[]
     total_count: number;
@@ -135,7 +133,7 @@ export interface NativeTransactionResponse extends TransactionResponse {
 
 export interface IndexerAccountTransfersResponse {
     contracts: {
-        [contractHash: string]: IndexerAccountTransactionsContractData
+        [contractHash: string]: IndexerContractData
     };
     results: EvmTransfer[]
     total_count?: number; // included if includePagination is true in the request
@@ -151,4 +149,5 @@ export interface EvmTransfer {
     type: 'erc20' | 'erc721' | 'erc1155', // type of token being transferred
     transaction: string; // transaction hash
     timestamp: number; // integer representing ms from epoch
+    id?: string; // id of the NFT transferred (ERC721 or ERC1155 only)
 }
diff --git a/src/pages/evm/wallet/WalletPage.vue b/src/pages/evm/wallet/WalletPage.vue
index 787d29684..48f4160f6 100644
--- a/src/pages/evm/wallet/WalletPage.vue
+++ b/src/pages/evm/wallet/WalletPage.vue
@@ -46,7 +46,7 @@ watch(accountStore, (newAccountStoreState) => {
             limit: 5,
             includeAbi: true,
         });
-        historyStore.fetchEVMTransfersForAccount('current').then(() => {
+        historyStore.fetchEvmNftTransfersForAccount('current', newAccount.address).then(() => {
             historyStore.fetchEVMTransactionsForAccount('current');
         });
     }
diff --git a/src/pages/evm/wallet/WalletTransactionRow.vue b/src/pages/evm/wallet/WalletTransactionRow.vue
index ad5c5cac5..690d45818 100644
--- a/src/pages/evm/wallet/WalletTransactionRow.vue
+++ b/src/pages/evm/wallet/WalletTransactionRow.vue
@@ -3,10 +3,10 @@ import { defineComponent, PropType } from 'vue';
 
 import InlineSvg from 'vue-inline-svg';
 
-import { ShapedErc20TransactionRow, ShapedNftTransactionRow } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { getLongDate } from 'src/antelope/stores/utils';
 import { useChainStore, useUserStore } from 'src/antelope';
+import { ShapedTransactionRow } from 'src/antelope/types';
 
 import ExternalLink from 'components/ExternalLink.vue';
 import TimeStamp from 'components/TimeStamp.vue';
@@ -30,7 +30,7 @@ export default defineComponent({
     },
     props: {
         transaction: {
-            type: Object as PropType<ShapedErc20TransactionRow | ShapedNftTransactionRow>,
+            type: Object as PropType<ShapedTransactionRow>,
             required: true,
         },
     },
diff --git a/src/pages/evm/wallet/WalletTransactionsTab.vue b/src/pages/evm/wallet/WalletTransactionsTab.vue
index 0b710208c..088976d08 100644
--- a/src/pages/evm/wallet/WalletTransactionsTab.vue
+++ b/src/pages/evm/wallet/WalletTransactionsTab.vue
@@ -26,7 +26,7 @@ export default defineComponent({
         },
         errorsFound: false,
         hideLoadingState: false,
-        fetchTransactionsInterval: null as null | NodeJS.Timer,
+        fetchTransactionsInterval: null as null | ReturnType<typeof setInterval>,
     }),
     computed: {
         doLiveUpdate() {
@@ -134,7 +134,9 @@ export default defineComponent({
                     includeAbi: true,
                 });
                 try {
-                    await historyStore.fetchEVMTransfersForAccount('current');
+                    if (historyStore.getEVMTransfers('current').length === 0) {
+                        await historyStore.fetchEvmNftTransfersForAccount('current', this.address);
+                    }
                     await historyStore.fetchEVMTransactionsForAccount('current');
                     this.pagination.rowsNumber = historyStore.getEvmTransactionsRowCount('current');
                 } catch (e) {

From 3faadf946af39a7de27342879f7e937344ea26ed Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Tue, 29 Aug 2023 17:30:08 -0400
Subject: [PATCH 030/268] fix capitalization

---
 src/i18n/en-us/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 4a11bdad8..183b1f145 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -202,7 +202,7 @@ export default {
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
         withdrawable_card_label: 'withdrawable',
-        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
+        withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',

From 7eb7ce32b5f5a5b5c73af45667507e85cd573f23 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Tue, 29 Aug 2023 19:46:40 -0400
Subject: [PATCH 031/268] WIP get NFT info showing

---
 src/antelope/stores/history.ts                | 71 +++++++++++++++----
 src/antelope/types/EvmTransaction.ts          |  1 +
 src/pages/evm/wallet/WalletTransactionRow.vue |  8 +++
 3 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 41988548b..82947894d 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -31,6 +31,7 @@ import {
     EvmSwapFunctionNames,
     EvmTransfer,
     IndexerContractData,
+    NftTransactionData,
 } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { useChainStore } from 'src/antelope/stores/chain';
@@ -213,6 +214,7 @@ export const useHistoryStore = defineStore(store_name, {
             const feedbackStore = useFeedbackStore();
             const userStore = useUserStore();
             const chain = useChainStore().getChain(label);
+            const nftStore = useNftsStore();
             const chain_settings = chain.settings as EVMChainSettings;
             const indexer = chain_settings.getIndexer();
             const contractStore = useContractStore();
@@ -226,6 +228,7 @@ export const useHistoryStore = defineStore(store_name, {
             // this request https://api.teloscan.io/v1/account/0x13B745FC35b0BAC9bab9fD20B7C9f46668232607/transfers?type=erc721&limit=9999999&offset=0&includePagination=false&includeAbi=false
             // response is 70kb and took 2 seconds
 
+            const allNftTransfers = this.__evm_transfers[label].transfers;
             transactions.forEach(async (tx) => {
                 const index = transactions.findIndex(t => t.hash === tx.hash);
 
@@ -235,7 +238,6 @@ export const useHistoryStore = defineStore(store_name, {
                 feedbackStore.setLoading(loadingFlag);
 
                 const erc20Transfers = await contractStore.getErc20TransfersFromTransaction(tx);
-                const nftTransfers = this.__evm_transfers[label].transfers;
                 const userAddressLower = this.__evm_filter.address.toLowerCase();
 
                 const gasUsedInTlosBn = BigNumber.from(tx.gasPrice).mul(tx.gasused);
@@ -250,6 +252,9 @@ export const useHistoryStore = defineStore(store_name, {
                 const valuesIn: TransactionValueData[] = [];
                 const valuesOut: TransactionValueData[] = [];
 
+                const nftsIn: NftTransactionData[] = [];
+                const nftsOut: NftTransactionData[] = [];
+
                 const isFailed = tx.status !== '0x1';
                 const isContractCreation = !tx.to && !!tx.contractAddress;
                 let functionName = '';
@@ -286,20 +291,60 @@ export const useHistoryStore = defineStore(store_name, {
                         }
                     }
 
+                    // eztodo for reference, a tx with multiple 1155 xfers: https://www.teloscan.io/tx/0xf7a2cadfce5adcd33c592d3aa277bf87ea5c06961e6a7e4f12e6a2bae7b595e5
                     // eztodo for reference, a 721 tx : 0x893c7d83b2bef2758e3bed78ba2ca93a3102059f6c6da0d91aa58b6f1a62ab75
-                    const nftTransferIndex = nftTransfers.findIndex(t => t.transaction === tx.hash);
-                    const nftId = nftTransfers[nftTransferIndex]?.id;
+                    const nftTransfersInTx = allNftTransfers.filter(transfer => transfer.transaction === tx.hash);
+                    if (nftTransfersInTx.length > 0) {
+                        // there is at least 1 NFT transfer in this transaction
+                        const nftDetailList = await Promise.all(nftTransfersInTx.map(transfer => nftStore.fetchNftDetails(label, transfer.contract, transfer.id ?? '')));
+
+                        // nftStore.fetchNftDetails(label, transfer.contract, transfer.id ?? '')
+                        nftDetailList.forEach((nftDetails, index) => {
+                            if (nftDetails) {
+                                let nftMediaType: 'image' | 'video' | 'audio' | 'unknown' = 'unknown';
+
+                                if (nftDetails.audioSrc) {
+                                    nftMediaType = 'audio';
+                                } else if (nftDetails.videoSrc) {
+                                    nftMediaType = 'video';
+                                } else if (nftDetails.imageSrcFull) {
+                                    nftMediaType = 'image';
+                                }
+
+                                const transferInfo = nftTransfersInTx[index];
+                                const shapedNftTransfer = {
+                                    quantity: +(transferInfo.amount || 1),
+                                    tokenId: transferInfo.id ?? '',
+                                    tokenName: nftDetails.name,
+                                    collectionAddress: transferInfo.contract,
+                                    collectionName: nftDetails.contractPrettyName,
+                                    type: nftMediaType,
+                                    imgSrc: nftDetails.imageSrcFull,
+                                    videoSrc: nftDetails.videoSrc,
+                                    audioSrc: nftDetails.audioSrc,
+                                };
+                                // debugger;
+                                // eztodo use userAddressLower
+                                if (transferInfo.from.toLowerCase() === '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607'.toLowerCase()) {
+                                    nftsOut.push(shapedNftTransfer);
+                                } else if (transferInfo.to.toLowerCase() === '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607'.toLowerCase()) {
+                                    nftsIn.push(shapedNftTransfer);
+                                }
+                            }
+                        });
+                    }
 
-                    if (nftTransferIndex >= 0 && nftId !== undefined) {
-                        // transfer is an NFT transfer
-                        const nftDetails = await useNftsStore().fetchNftDetails(label, nftTransfers[nftTransferIndex].contract, nftId);
-                        console.log(nftDetails);
 
-                        // eztodo remove, pepegurl
-                        if (nftTransfers[nftTransferIndex].contract === '0x78cb091062cc8c32CD9c814599d1987b1dCc5093') {
-                            debugger;
-                        }
-                    }
+                    // if (nftTransferIndex >= 0 && nftId !== undefined) {
+                    //     // transfer is an NFT transfer
+                    //     const nftDetails = await useNftsStore().fetchNftDetails(label, nftTransfers[nftTransferIndex].contract, nftId);
+                    //     console.log(nftDetails);
+
+                    //     // eztodo remove, pepegurl
+                    //     if (nftTransfers[nftTransferIndex].contract === '0x78cb091062cc8c32CD9c814599d1987b1dCc5093') {
+                    //         debugger;
+                    //     }
+                    // }
 
                     for (const tokenXfer of erc20Transfers) {
                         if (tokenXfer.symbol && tokenXfer.decimals) {
@@ -363,6 +408,8 @@ export const useHistoryStore = defineStore(store_name, {
                     toPrettyName,
                     valuesIn,
                     valuesOut,
+                    nftsIn,
+                    nftsOut,
                     gasUsed: +gasUsedInTlos,
                     gasFiatValue: gasInUsd,
                     failed: isFailed,
diff --git a/src/antelope/types/EvmTransaction.ts b/src/antelope/types/EvmTransaction.ts
index 5bd0b28db..650b06108 100644
--- a/src/antelope/types/EvmTransaction.ts
+++ b/src/antelope/types/EvmTransaction.ts
@@ -50,6 +50,7 @@ export interface NftTransactionData {
     collectionName?: string;
     imgSrc?: string;
     videoSrc?: string;
+    audioSrc?: string;
     type: 'image' | 'video' | 'audio' | 'unknown';
 }
 
diff --git a/src/pages/evm/wallet/WalletTransactionRow.vue b/src/pages/evm/wallet/WalletTransactionRow.vue
index 690d45818..582b395d9 100644
--- a/src/pages/evm/wallet/WalletTransactionRow.vue
+++ b/src/pages/evm/wallet/WalletTransactionRow.vue
@@ -156,6 +156,14 @@ export default defineComponent({
 
 <template>
 <div class="c-transaction-row">
+    <img
+        v-for="(nftIn, index) in transaction.nftsIn"
+        :key="index"
+        :src="nftIn.imgSrc"
+        height="24"
+        width="24"
+    >
+    <!-- eztodo remove image here ^ -->
     <div class="c-transaction-row__info-container c-transaction-row__info-container--first">
         <div class="c-transaction-row__interaction-icon-container">
             <InlineSvg

From 838dee0fc479cfe185e3cb2e36530946d43e60cd Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Wed, 30 Aug 2023 19:38:31 -0400
Subject: [PATCH 032/268] WIP add nfts to UI, styling, investigate broken 1155

---
 src/antelope/stores/history.ts                |  29 ++-
 src/antelope/stores/nfts.ts                   |   8 +-
 src/antelope/types/EvmTransaction.ts          |   1 +
 src/antelope/types/NFTClass.ts                |   2 +
 src/components/ExternalLink.vue               |  13 +-
 src/pages/evm/nfts/NftDetailsPage.vue         |  17 +-
 src/pages/evm/wallet/WalletTransactionRow.vue | 190 ++++++++++++++++--
 .../evm/wallet/WalletTransactionsTab.vue      |   4 -
 8 files changed, 224 insertions(+), 40 deletions(-)

diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 82947894d..1df62b756 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -32,6 +32,7 @@ import {
     EvmTransfer,
     IndexerContractData,
     NftTransactionData,
+    NftTokenInterface,
 } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { useChainStore } from 'src/antelope/stores/chain';
@@ -105,6 +106,7 @@ export const useHistoryStore = defineStore(store_name, {
             feedbackStore.setLoading('history.fetchEVMTransactionsForAccount');
 
             try {
+                // eztodo where to debounce?
                 // eztodo erc1155 are not returned by indexer for nft detail page
                 // for NFTs (ERC1155 and ERC721), we need to fetch information from the transfers endpoint,
                 // which returns data required for the UI
@@ -211,7 +213,6 @@ export const useHistoryStore = defineStore(store_name, {
 
         async shapeTransactions(label: Label = 'current', transactions: EvmTransaction[]) {
             this.trace('shapeTransactions', label);
-            const feedbackStore = useFeedbackStore();
             const userStore = useUserStore();
             const chain = useChainStore().getChain(label);
             const nftStore = useNftsStore();
@@ -229,13 +230,9 @@ export const useHistoryStore = defineStore(store_name, {
             // response is 70kb and took 2 seconds
 
             const allNftTransfers = this.__evm_transfers[label].transfers;
-            transactions.forEach(async (tx) => {
-                const index = transactions.findIndex(t => t.hash === tx.hash);
 
-                // eztodo is this actually done parallely?
-                // Each of these calls is a separate context, so we can do them in parallel
-                const loadingFlag = `history.shapeTransactions-${index}`;
-                feedbackStore.setLoading(loadingFlag);
+            const transactionShapePromises = transactions.map(async (tx) => {
+                const index = transactions.findIndex(t => t.hash === tx.hash);
 
                 const erc20Transfers = await contractStore.getErc20TransfersFromTransaction(tx);
                 const userAddressLower = this.__evm_filter.address.toLowerCase();
@@ -294,9 +291,19 @@ export const useHistoryStore = defineStore(store_name, {
                     // eztodo for reference, a tx with multiple 1155 xfers: https://www.teloscan.io/tx/0xf7a2cadfce5adcd33c592d3aa277bf87ea5c06961e6a7e4f12e6a2bae7b595e5
                     // eztodo for reference, a 721 tx : 0x893c7d83b2bef2758e3bed78ba2ca93a3102059f6c6da0d91aa58b6f1a62ab75
                     const nftTransfersInTx = allNftTransfers.filter(transfer => transfer.transaction === tx.hash);
+
                     if (nftTransfersInTx.length > 0) {
                         // there is at least 1 NFT transfer in this transaction
-                        const nftDetailList = await Promise.all(nftTransfersInTx.map(transfer => nftStore.fetchNftDetails(label, transfer.contract, transfer.id ?? '')));
+                        const nftDetailList = await Promise.all(
+                            nftTransfersInTx.map(
+                                transfer => nftStore.fetchNftDetails(
+                                    label,
+                                    transfer.contract,
+                                    transfer.id ?? '',
+                                    transfer.type.toUpperCase() as NftTokenInterface,
+                                ),
+                            ),
+                        );
 
                         // nftStore.fetchNftDetails(label, transfer.contract, transfer.id ?? '')
                         nftDetailList.forEach((nftDetails, index) => {
@@ -415,11 +422,11 @@ export const useHistoryStore = defineStore(store_name, {
                     failed: isFailed,
                 } as ShapedTransactionRow;
 
-                // The shapedTxs may not be in the same order as the transactions
+                // The shapedTxs may not be in the same order as the transactions eztodo what does this mean
                 this.__shaped_evm_transaction_rows[label][index] = shapedTx;
-
-                feedbackStore.unsetLoading(loadingFlag);
             });
+
+            await Promise.all(transactionShapePromises);
         },
 
 
diff --git a/src/antelope/stores/nfts.ts b/src/antelope/stores/nfts.ts
index 2ab4d73b0..5c5af0dde 100644
--- a/src/antelope/stores/nfts.ts
+++ b/src/antelope/stores/nfts.ts
@@ -5,7 +5,7 @@
 
 import { defineStore } from 'pinia';
 
-import { Label, Network, Address, IndexerTransactionsFilter, NFTClass, ERC721_TYPE } from 'src/antelope/types';
+import { Label, Network, Address, IndexerTransactionsFilter, NFTClass, ERC721_TYPE, NftTokenInterface } from 'src/antelope/types';
 
 import { useFeedbackStore, getAntelope, useChainStore, useEVMStore } from 'src/antelope';
 import { createTraceFunction, isTracingAll } from 'src/antelope/stores/feedback';
@@ -180,8 +180,8 @@ export const useNftsStore = defineStore(store_name, {
             }
         },
 
-        async fetchNftDetails(label: Label, contract: string, tokenId: string): Promise<NFTClass | null> {
-            this.trace('fetchNftDetails', label, contract, tokenId);
+        async fetchNftDetails(label: Label, contract: string, tokenId: string, type: NftTokenInterface): Promise<NFTClass | null> {
+            this.trace('fetchNftDetails', label, contract, tokenId, type);
             let promise = Promise.resolve(null) as Promise<NFTClass | null>;
             try {
                 const chain = useChainStore().getChain(label);
@@ -236,7 +236,7 @@ export const useNftsStore = defineStore(store_name, {
                         useEVMStore().getNFT(
                             contract,
                             tokenId,
-                            ERC721_TYPE,
+                            type.toUpperCase(),
                         ).then((nft) => {
                             this.trace('fetchNftDetails', 'indexer fallback:', nft);
                             if (nft) {
diff --git a/src/antelope/types/EvmTransaction.ts b/src/antelope/types/EvmTransaction.ts
index 650b06108..49c0ed76d 100644
--- a/src/antelope/types/EvmTransaction.ts
+++ b/src/antelope/types/EvmTransaction.ts
@@ -67,6 +67,7 @@ export const EvmSwapFunctionNames = [
 export interface ShapedTransactionRow {
     id: string; // transaction ID
     epoch: number; // epoch in milliseconds
+    // eztodo are there nft swap functions? should mint be showed differently?
     // action should be 'send', 'receive', 'swap', 'contractCreation', or some other action like 'approve'
     // a swap is any function in EvmSwapFunctionNames
     actionName: string;
diff --git a/src/antelope/types/NFTClass.ts b/src/antelope/types/NFTClass.ts
index 10f83fc6c..ab46e9e9b 100644
--- a/src/antelope/types/NFTClass.ts
+++ b/src/antelope/types/NFTClass.ts
@@ -34,6 +34,8 @@ export const NFTSourceTypes = {
     NONE: 'none',
 };
 
+export type NftTokenInterface = 'ERC721' | 'ERC1155';
+
 // NFT classes ------------------
 
 export class NFTContractClass {
diff --git a/src/components/ExternalLink.vue b/src/components/ExternalLink.vue
index 5a997f455..94915ea84 100644
--- a/src/components/ExternalLink.vue
+++ b/src/components/ExternalLink.vue
@@ -28,7 +28,7 @@ const formattedText = computed(() => {
     rel="noopener noreferrer"
     class="c-external-link__link"
 >
-    {{ formattedText }}
+    <div class="c-external-link__text">{{ formattedText }}</div>
     <q-icon size="xs" name="o_launch" class="c-external-link__icon"/>
 </a>
 </template>
@@ -42,11 +42,20 @@ const formattedText = computed(() => {
         color: var(--link-color);
         display: inline-flex;
         align-items: center;
+        gap: 4px;
+        max-width: 100%;
+    }
+
+    &__text {
+        display: inline-block;
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 
     &__icon {
         color: var(--link-color);
-        margin-left: 4px;
         transform: scale(0.67);
     }
 }
diff --git a/src/pages/evm/nfts/NftDetailsPage.vue b/src/pages/evm/nfts/NftDetailsPage.vue
index bd9076d02..b3b65e50e 100644
--- a/src/pages/evm/nfts/NftDetailsPage.vue
+++ b/src/pages/evm/nfts/NftDetailsPage.vue
@@ -2,7 +2,7 @@
 import AppPage from 'components/evm/AppPage.vue';
 import { useNftsStore } from 'src/antelope/stores/nfts';
 import { useRoute } from 'vue-router';
-import { ShapedNFT } from 'src/antelope/types';
+import { ERC1155_TYPE, ERC721_TYPE, ShapedNFT } from 'src/antelope/types';
 import { computed, onBeforeMount, ref } from 'vue';
 import NftViewer from 'pages/evm/nfts/NftViewer.vue';
 import NftDetailsCard from 'pages/evm/nfts/NftDetailsCard.vue';
@@ -26,12 +26,17 @@ const loading = ref(true);
 const contractAddress = route.query.contract as string;
 const nftId = route.query.id as string;
 
-onBeforeMount(() => {
+onBeforeMount(async () => {
     if (contractAddress && nftId) {
-        nftStore.fetchNftDetails('current', contractAddress, nftId).then((nftResponse) => {
-            nft.value = nftResponse ?? null;
-            loading.value = false;
-        });
+        const erc721Details = await nftStore.fetchNftDetails('current', contractAddress, nftId, ERC721_TYPE);
+        const erc1155Details = await nftStore.fetchNftDetails('current', contractAddress, nftId, ERC1155_TYPE);
+
+        if (erc721Details) {
+            nft.value = erc721Details;
+        } else if (erc1155Details) {
+            nft.value = erc1155Details;
+        }
+        loading.value = false;
     }
 });
 
diff --git a/src/pages/evm/wallet/WalletTransactionRow.vue b/src/pages/evm/wallet/WalletTransactionRow.vue
index 582b395d9..2a6c462a8 100644
--- a/src/pages/evm/wallet/WalletTransactionRow.vue
+++ b/src/pages/evm/wallet/WalletTransactionRow.vue
@@ -12,6 +12,7 @@ import ExternalLink from 'components/ExternalLink.vue';
 import TimeStamp from 'components/TimeStamp.vue';
 import ToolTip from 'components/ToolTip.vue';
 import { getCurrencySymbol, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { truncateAddress } from 'src/antelope/stores/utils/text-utils';
 
 const userStore = useUserStore();
 
@@ -35,6 +36,12 @@ export default defineComponent({
         },
     },
     computed: {
+        test() {
+            if (this.transaction.id.toLowerCase() === '0xf7a2cadfce5adcd33c592d3aa277bf87ea5c06961e6a7e4f12e6a2bae7b595e5') {
+                debugger;
+            }
+            return '';
+        },
         fiatLocale(): string {
             return useUserStore().fiatLocale;
         },
@@ -150,20 +157,31 @@ export default defineComponent({
 
             return `${formatted} ${symbol}`;
         },
+        getShapedTokenName(name: string, id: string) {
+            // if the token name includes the ID, remove the ID because we display ID separately
+            // eztodo make this a util function
+            let shapedName = name;
+            if (name.includes(id)) {
+                shapedName = name.replace(id, '');
+
+                if (shapedName[shapedName.length - 1] === '#') {
+                    shapedName = shapedName.slice(0, -1);
+                }
+            }
+            return shapedName.trim();
+        },
+        getTruncatedAddress(address: string) {
+            return truncateAddress(address);
+        },
     },
 });
 </script>
 
 <template>
-<div class="c-transaction-row">
-    <img
-        v-for="(nftIn, index) in transaction.nftsIn"
-        :key="index"
-        :src="nftIn.imgSrc"
-        height="24"
-        width="24"
-    >
-    <!-- eztodo remove image here ^ -->
+<div
+    class="c-transaction-row"
+    :class="{ test: transaction.id.toLowerCase() === '0xf7a2cadfce5adcd33c592d3aa277bf87ea5c06961e6a7e4f12e6a2bae7b595e5' }"
+>
     <div class="c-transaction-row__info-container c-transaction-row__info-container--first">
         <div class="c-transaction-row__interaction-icon-container">
             <InlineSvg
@@ -178,7 +196,7 @@ export default defineComponent({
             />
         </div>
 
-        <div>
+        <div class="c-transaction-row__interaction-text-container">
             <div class="c-transaction-row__primary-interaction-text">
                 <template v-if="actionHasDescriptiveText">
                     <span class="c-transaction-row__action-description">
@@ -249,6 +267,45 @@ export default defineComponent({
             </span>
         </div>
 
+        <div
+            v-for="(nftTransfer, index) in transaction.nftsOut"
+            :key="`nfts-out-${index}`"
+            class="c-transaction-row__value-container"
+        >
+            <div class="c-transaction-row__nft c-transaction-row__nft--out">
+                <span>-{{ nftTransfer.quantity }}</span>
+                <!-- eztodo add test case for no image src -->
+                <img
+                    v-if="nftTransfer.imgSrc"
+                    :src="nftTransfer.imgSrc"
+                    :alt="nftTransfer.tokenName"
+                    height="40"
+                    width="40"
+                    class="c-transaction-row__nft-thumbnail"
+                >
+                <q-icon
+                    v-else
+                    name="o_image_not_supported"
+                    color="grey"
+                    size="40px"
+                />
+                <div class="c-transaction-row__nft-info-container">
+                    <div class="c-transaction-row__nft-name-container">
+                        <div class="c-transaction-row__nft-name">
+                            {{ getShapedTokenName(nftTransfer.tokenName, nftTransfer.tokenId) }}
+                        </div>
+                        <div class="c-transaction-row__nft-id">
+                            #{{ nftTransfer.tokenId }}
+                        </div>
+                    </div>
+                    <div class="c-transaction-row__nft-collection">
+                        {{ nftTransfer?.collectionName ?? getTruncatedAddress(nftTransfer.collectionAddress) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- eztodo scroll up when changing rowsperpage or page number -->
         <div
             v-for="(values, index) in transaction.valuesIn"
             :key="`values-in-${index}`"
@@ -269,6 +326,45 @@ export default defineComponent({
                 +{{ formatAmount(values.fiatValue) }}
             </span>
         </div>
+
+        <div
+            v-for="(nftTransfer, index) in transaction.nftsIn"
+            :key="`nfts-in-${index}`"
+            class="c-transaction-row__value-container"
+        >
+            <div class="c-transaction-row__nft c-transaction-row__nft--in">
+                <span>+{{ nftTransfer.quantity }}</span>
+                <!-- eztodo add test case for no image src -->
+                <img
+                    v-if="nftTransfer.imgSrc"
+                    :src="nftTransfer.imgSrc"
+                    :alt="nftTransfer.tokenName"
+                    height="40"
+                    width="40"
+                    class="c-transaction-row__nft-thumbnail"
+                >
+                <q-icon
+                    v-else
+                    name="o_image_not_supported"
+                    color="grey"
+                    size="40px"
+                />
+                <div class="c-transaction-row__nft-info-container">
+                    <div class="c-transaction-row__nft-name-container">
+                        <div class="c-transaction-row__nft-name">
+                            {{ getShapedTokenName(nftTransfer.tokenName, nftTransfer.tokenId) }}
+                        </div>
+                        <div class="c-transaction-row__nft-id">
+                            #{{ nftTransfer.tokenId }}
+                        </div>
+                    </div>
+                    <div class="c-transaction-row__nft-collection">
+                        {{ nftTransfer?.collectionName ?? getTruncatedAddress(nftTransfer.collectionAddress) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
     </div>
 
     <div class="c-transaction-row__info-container c-transaction-row__info-container--third">
@@ -296,6 +392,9 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
+.test {
+    border: 1px solid red;
+}
 .c-transaction-row {
     max-width: 1000px;
     padding: 16px 8px;
@@ -309,7 +408,7 @@ export default defineComponent({
 
     @include sm-and-up {
         gap: 32px;
-        grid-template: 'a b c' / auto auto max-content;
+        grid-template: 'a b c' / max-content auto max-content;
     }
 
     &__info-container {
@@ -318,13 +417,14 @@ export default defineComponent({
 
         &--first {
             display: grid;
+            grid-area: a;
             grid-template: 'a b c' auto / min-content auto max-content;
             gap: 8px;
 
             @include sm-and-up {
                 grid-template:
                     'a b' auto
-                    'c c' auto
+                    'c c' min-content
                     / 16px max-content;
             }
         }
@@ -340,6 +440,7 @@ export default defineComponent({
 
         &--second {
             display: flex;
+            grid-area: b;
             flex-direction: column;
             gap: 8px;
 
@@ -350,6 +451,7 @@ export default defineComponent({
 
         &--third {
             display: flex;
+            grid-area: c;
             align-items: center;
             gap: 4px;
 
@@ -367,12 +469,18 @@ export default defineComponent({
     }
 
     &__interaction-icon-container {
+        grid-area: a;
         height: 16px;
         width: 16px;
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        // align-self: center;
+    }
+
+    &__interaction-text-container {
+        grid-area: b;
+        max-width: 100%;
+        min-width: 0;
     }
 
     &__interaction-icon {
@@ -428,6 +536,7 @@ export default defineComponent({
     }
 
     &__timestamp {
+        grid-area: c;
         display: flex;
         align-items: flex-start;
         justify-content: flex-end;
@@ -488,6 +597,61 @@ export default defineComponent({
         }
     }
 
+    &__nft {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        overflow: hidden;
+
+        &--out {
+            color: var(--negative-color);
+        }
+
+        &--in {
+            color: var(--positive-color);
+        }
+    }
+
+    &__nft-thumbnail {
+        height: 40px;
+        width: 40px;
+        border-radius: 4px;
+    }
+
+    &__nft-info-container {
+        min-width: 0;
+        max-width: 150px;
+
+        @include sm-and-up {
+            max-width: 200px;
+        }
+    }
+
+    &__nft-name-container {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 4px;
+        align-items: center;
+    }
+
+    &__nft-name,
+    &__nft-id,
+    &__nft-collection {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__nft-name {
+        @include text--paragraph;
+    }
+
+    &__nft-id {
+        @include text--paragraph-bold;
+        flex-shrink: 0;
+        max-width: 70%;
+    }
+
     &__gas-icon-container {
         display: flex;
         align-items: center;
diff --git a/src/pages/evm/wallet/WalletTransactionsTab.vue b/src/pages/evm/wallet/WalletTransactionsTab.vue
index 088976d08..bd382d171 100644
--- a/src/pages/evm/wallet/WalletTransactionsTab.vue
+++ b/src/pages/evm/wallet/WalletTransactionsTab.vue
@@ -109,10 +109,6 @@ export default defineComponent({
                 this.hideLoadingState = false;
             }, 550);
         },
-        isLoadingTransaction(i: number) {
-            const loadingFlag = `history.shapeTransactions-${i}`;
-            return feedbackStore.isLoading(loadingFlag);
-        },
         async getTransactions() {
             const offset = (this.pagination.page - 1) * this.pagination.rowsPerPage;
             let limit = this.pagination.rowsPerPage;

From 8e6ac7e820a1e497c39e05e0d4f9298420527c1d Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 11:25:05 -0300
Subject: [PATCH 033/268] addressing Erza's feedback

---
 src/antelope/chains/EVMChainSettings.ts     |  5 +-
 src/antelope/stores/chain.ts                |  6 +-
 src/antelope/stores/rex.ts                  | 62 ++++++++++++++++++---
 src/antelope/stores/utils/currency-utils.ts |  5 +-
 src/antelope/types/TokenClass.ts            |  6 +-
 src/pages/evm/staking/StakingPageHeader.vue | 21 +++++--
 src/pages/evm/wallet/SendPage.vue           | 10 ++--
 7 files changed, 89 insertions(+), 26 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index e229a303c..504cc0ca7 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -28,6 +28,7 @@ import { ethers } from 'ethers';
 import { toStringNumber } from 'src/antelope/stores/utils/currency-utils';
 import { dateIsWithinXMinutes } from 'src/antelope/stores/utils/date-utils';
 import { getAntelope } from 'src/antelope';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 
 export default abstract class EVMChainSettings implements ChainSettings {
@@ -525,10 +526,10 @@ export default abstract class EVMChainSettings implements ChainSettings {
     async getEstimatedGas(limit: number): Promise<{ system:ethers.BigNumber, fiat:ethers.BigNumber }> {
         const gasPrice: ethers.BigNumber = await this.getGasPrice();
         const tokenPrice: number = await this.getUsdPrice();
-        const price = ethers.utils.parseUnits(toStringNumber(tokenPrice), 18);
+        const price = ethers.utils.parseUnits(toStringNumber(tokenPrice), WEI_PRECISION);
         const system = gasPrice.mul(limit);
         const fiatDouble = system.mul(price);
-        const fiat = fiatDouble.div(ethers.utils.parseUnits('1', 18));
+        const fiat = fiatDouble.div(ethers.utils.parseUnits('1', WEI_PRECISION));
         return { system, fiat };
     }
     async getLatestBlock(): Promise<ethers.BigNumber> {
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index cffee685f..2893b2d03 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -279,12 +279,14 @@ export const useChainStore = defineStore(store_name, {
             }
         },
         setStakedRatio(label: string, ratio: ethers.BigNumber) {
-            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            const decimals = (this.getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
             this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
         },
         setUnstakedRatio(label: string, ratio: ethers.BigNumber) {
-            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            const decimals = (this.getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
             this.trace('setUnstakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).unstakeRatio = ratio;
         },
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 50198bcd6..f154ed6fd 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -18,6 +18,7 @@ import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
 import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 
 
@@ -69,6 +70,12 @@ export const useRexStore = defineStore(store_name, {
                 },
             });
         },
+        /**
+         * auxiliar method to get a contract instance. Only used internally.
+         * @param label identifies the context (network on this case) for the data
+         * @param address the contract address
+         * @returns the contract instance
+         */
         async getContractInstance(label: string, address: string) {
             const authenticator = useAccountStore().getEVMAuthenticator(label);
             if (!authenticator) {
@@ -83,35 +90,60 @@ export const useRexStore = defineStore(store_name, {
             const contractInstance = await contract.getContractInstance();
             return contractInstance;
         },
+        /**
+         * auxiliar method to get the staked system contract instance
+         * @param label identifies the context (network on this case) for the data
+         * @returns the contract instance
+         */
         async getStakedSystemContractInstance(label: string) {
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().address;
             return this.getContractInstance(label, address);
         },
+        /**
+         * auxiliar method to get the escrow contract instance
+         * @param label identifies the context (network on this case) for the data
+         * @returns the contract instance
+         */
         async getEscrowContractInstance(label: string) {
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getEscrowContractAddress();
             return this.getContractInstance(label, address);
         },
+        /**
+         * This method queries the total amount of staked tokens in the system and maintains it in the store.
+         * @param label identifies the context (network on this case) for the data
+         */
         async updateTotalStaking(label: string) {
             this.trace('updateTotalStaking', label);
             const contract = await this.getStakedSystemContractInstance(label);
             const totalStaking = await contract.totalAssets();
             this.setTotalStaking(label, totalStaking);
         },
+        /**
+         * This method shopuld be called to quiery the REX data for a given account,
+         * along with the current stato of the total staked tokens on the system.
+         * @param label identifies the context (network on this case) for the data
+         * @param account the account to update the data for
+         */
         async updateRexDataForAccount(label: string, account: AccountModel | null) {
             this.trace('updateRexDataForAccount', label, account);
             useFeedbackStore().setLoading('updateRexDataForAccount');
             try {
                 await Promise.all([
-                    this.updateWithdrawable(label),
-                    this.updateDeposits(label),
-                    this.updateBalance(label),
-                    this.updateTotalStaking(label),
+                    this.updateWithdrawable(label),  // account's data
+                    this.updateDeposits(label),      // account's data
+                    this.updateBalance(label),       // account's data
+                    this.updateTotalStaking(label),  // system's data
                 ]);
             } catch (error) {
                 console.error(error);
                 useFeedbackStore().unsetLoading('updateRexDataForAccount');
             }
         },
+        /**
+         * This method queries the withdrawable amount for a given account and maintains it in the store.
+         * The withdrawable amount is the amount of tokens that can be withdrawn from the REX system right now.
+         * @param label identifies the context (account-network) for the data
+         */
         async updateWithdrawable(label: string) {
             this.trace('updateWithdrawable', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -119,6 +151,12 @@ export const useRexStore = defineStore(store_name, {
             const withdrawable = await contract.maxWithdraw(address);
             this.setWithdrawable(label, withdrawable);
         },
+        /**
+         * This method queries the deposits for a given account and maintains it in the store.
+         * The deposits contains a list of individual whitdrawls attempts, each with an amount and a date.
+         * If the date is in the future, the amount is not available for withdrawal yet.
+         * @param label identifies the context (account-network) for the data
+         */
         async updateDeposits(label: string) {
             this.trace('updateDeposits', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -126,6 +164,11 @@ export const useRexStore = defineStore(store_name, {
             const deposits = await contract.depositsOf(address);
             this.setDeposits(label, deposits);
         },
+        /**
+         * This method queries the balance for a given account and maintains it in the store.
+         * The account's balance is the sum of all the deposits (withdrawable or not)
+         * @param label identifies the context (account-network) for the data
+         */
         async updateBalance(label: string) {
             this.trace('updateBalance', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -133,26 +176,29 @@ export const useRexStore = defineStore(store_name, {
             const balance = await contract.balanceOf(address);
             this.setBalance(label, balance);
         },
+        getStakingDecimals() {
+            return useChainStore().currentEvmChain?.settings.getStakedSystemToken().decimals || WEI_PRECISION;
+        },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(withdrawable, 18));
+            const num = parseFloat(ethers.utils.formatUnits(withdrawable, this.getStakingDecimals()));
             this.trace('setWithdrawable', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).withdrawable = withdrawable;
         },
         setDeposits(label: string, deposits: EvmRexDeposit[]) {
-            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, 18))));
+            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, this.getStakingDecimals()))));
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).deposits = deposits;
         },
         setBalance(label: string, balance: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(balance, 18));
+            const num = parseFloat(ethers.utils.formatUnits(balance, this.getStakingDecimals()));
             this.trace('setBalance', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).balance = balance;
         },
         setTotalStaking(label: string, totalStaking: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(totalStaking, 18));
+            const num = parseFloat(ethers.utils.formatUnits(totalStaking, this.getStakingDecimals()));
             this.trace('setTotalStaking', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).totalStaking = totalStaking;
diff --git a/src/antelope/stores/utils/currency-utils.ts b/src/antelope/stores/utils/currency-utils.ts
index 5da419231..5c6998d8e 100644
--- a/src/antelope/stores/utils/currency-utils.ts
+++ b/src/antelope/stores/utils/currency-utils.ts
@@ -2,6 +2,7 @@ import { BigNumber } from 'ethers';
 import { parseUnits } from 'ethers/lib/utils';
 import { formatUnits } from '@ethersproject/units';
 import Decimal from 'decimal.js';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 /**
  * Given a number or string, returns a string representation of the number with up to 18 decimal places
@@ -14,7 +15,7 @@ export function toStringNumber(value: number | string): string {
         return value;
     } else if (typeof value === 'number') {
         const num = new Decimal(value);
-        return num.toFixed(18);
+        return num.toFixed(WEI_PRECISION);
     } else {
         throw new Error('Invalid value type: ' + typeof value);
     }
@@ -309,7 +310,7 @@ export function getFloatReciprocal(float: number | string) {
 
     return new Decimal(1)
         .dividedBy(float)
-        .toFixed(18)
+        .toFixed(WEI_PRECISION)
         .replace(trailingZeroesRegex, '')
         .replace(trailingDotRegex, '');
 }
diff --git a/src/antelope/types/TokenClass.ts b/src/antelope/types/TokenClass.ts
index 7d372a7d0..54f048872 100644
--- a/src/antelope/types/TokenClass.ts
+++ b/src/antelope/types/TokenClass.ts
@@ -1,5 +1,5 @@
 import { ethers } from 'ethers';
-import { formatWei } from 'src/antelope/stores/utils';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
 import { toStringNumber } from 'src/antelope/stores/utils/currency-utils';
 
 export const TOKEN_PRICE_DECIMALS = 18;
@@ -89,7 +89,7 @@ export class TokenPrice {
     }
 
     get decimals(): number {
-        return this.market?.info.decimals || 18;
+        return this.market?.info.decimals || TOKEN_PRICE_DECIMALS;
     }
 
     // Returns the token price as BigNumber
@@ -193,7 +193,7 @@ export class TokenClass implements TokenSourceInfo {
         this.chainId = sourceInfo.chainId;
         this.network = sourceInfo.network;
         this.name = sourceInfo.name;
-        this.decimals = sourceInfo.decimals ?? sourceInfo.precision ?? 18;
+        this.decimals = sourceInfo.decimals ?? sourceInfo.precision ?? WEI_PRECISION;
         this.isSystem = sourceInfo.isSystem;
         this.isNative = sourceInfo.isNative;
         this.logo = sourceInfo.logo ?? sourceInfo.logoURI;
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 17500dade..97b34369d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
@@ -26,7 +26,7 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
-const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
+const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
@@ -37,7 +37,7 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value);
+const systemTokenPrice = ref(undefined as BigNumber | undefined);
 const stakedFiatValueBn = computed(() => {
     if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
@@ -47,6 +47,19 @@ const stakedFiatValueBn = computed(() => {
     }
 });
 
+// watch the balances store to update the staked token balance and the system token price
+watch(() => balancesStore.getBalances(label), (balances) => {
+    const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
+    if (stakedTokenBalance) {
+        stakedTokenBalanceBn.value = stakedTokenBalance;
+    }
+    const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
+    if (systemTokenPriceBalance) {
+        systemTokenPrice.value = systemTokenPriceBalance;
+    }
+});
+
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);
@@ -96,7 +109,6 @@ const apyPrittyPrint = computed(() => {
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref($t('evm_stake.unstaking_period'));
 
-// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
 const tvlAmountBn = computed(() => {
     const totalStaking = useRexStore().getRexData(label)?.totalStaking;
     if (totalStaking) {
@@ -107,7 +119,6 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
-// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
 const totalFiatValueBn = computed(() => {
     const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
     const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
diff --git a/src/pages/evm/wallet/SendPage.vue b/src/pages/evm/wallet/SendPage.vue
index e16307a6d..a5456d1c0 100644
--- a/src/pages/evm/wallet/SendPage.vue
+++ b/src/pages/evm/wallet/SendPage.vue
@@ -4,7 +4,7 @@ import AppPage from 'components/evm/AppPage.vue';
 import UserInfo from 'components/evm/UserInfo.vue';
 import { getAntelope, useAccountStore, useChainStore, useUserStore } from 'src/antelope';
 import { TransactionResponse, TokenClass, TokenBalance, NativeCurrencyAddress, AntelopeError } from 'src/antelope/types';
-import { formatWei, prettyPrintBalance, prettyPrintFiatBalance } from 'src/antelope/stores/utils';
+import { WEI_PRECISION, formatWei, prettyPrintBalance, prettyPrintFiatBalance } from 'src/antelope/stores/utils';
 import { BigNumber, ethers } from 'ethers';
 import CurrencyInput from 'components/evm/inputs/CurrencyInput.vue';
 import AddressInput from 'components/evm/inputs/AddressInput.vue';
@@ -103,11 +103,13 @@ export default defineComponent({
         },
         gasFeeInSystemSym() {
             const symbol = chainStore.loggedChain.settings.getSystemToken().symbol;
-            const gas = `${formatWei(this.estimatedGas.system, 18, 18)}`;
+            const decimals = chainStore.loggedChain.settings.getSystemToken().decimals;
+            const gas = `${formatWei(this.estimatedGas.system, decimals, WEI_PRECISION)}`;
             return prettyPrintBalance(gas, userStore.fiatLocale, this.isMobile, symbol);
         },
         gasFeeInFiat() {
-            const gasFiat = `${formatWei(this.estimatedGas.fiat, 18, 18)}`;
+            const decimals = chainStore.loggedChain.settings.getSystemToken().decimals;
+            const gasFiat = `${formatWei(this.estimatedGas.fiat, decimals, WEI_PRECISION)}`;
             return prettyPrintFiatBalance(gasFiat, userStore.fiatLocale, this.isMobile, userStore.fiatCurrency);
         },
         isMobile(): boolean {
@@ -247,7 +249,7 @@ 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, 18)} ${token.symbol}`;
+                        const quantity = `${formatWei(amount, token.decimals, WEI_PRECISION)} ${token.symbol}`;
                         const address = to.substring(0, 6) + '...' + to.substring(to.length - 4, to.length);
                         const dismiss = ant.config.notifyNeutralMessageHandler(
                             this.$t('notification.neutral_message_sending', { quantity, address }),

From ec2bad86422344cc3dbfddfdaa1275f53768cd14 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 16:00:26 -0300
Subject: [PATCH 034/268] WIP

---
 src/components/evm/AppNav.vue               |   1 -
 src/i18n/en-us/index.js                     |   7 +
 src/pages/evm/staking/StakingPage.vue       |  22 ++-
 src/pages/evm/staking/StakingPageHeader.vue | 149 ++++++++++++++++++++
 src/router/routes.js                        |  10 +-
 5 files changed, 169 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/evm/staking/StakingPageHeader.vue

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 479ff74ce..a8b47a003 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -261,7 +261,6 @@ export default defineComponent({
             </li>
 
             <li
-                v-if="false"
                 class="c-app-nav__menu-item"
                 role="menuitem"
                 :tabindex="menuItemTabIndex"
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index f181527d5..9815d6cfb 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -189,6 +189,13 @@ export default {
         wrap_input_label: 'Wrapping Amount',
         unwrap_input_label: 'Unwrapping Amount',
     },
+    evm_stake: {
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        staked_card_label: 'Staked {symbol}',
+        staked_card_tooltip: 'Staked\n\n' +
+        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_tooltip: 'Unstaking',
+    },
     notification:{
         success_title_trx: 'Success',
         success_title_copied: 'Copied',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index c7e321c75..e5ac5b327 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -1,24 +1,14 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script setup lang="ts">
 import AppPage from 'components/evm/AppPage.vue';
+import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
 
-export default defineComponent({
-    name: 'StakingPage',
-    components: {
-        AppPage,
-    },
-    data: () => ({
-        tabs: ['stake', 'unstake', 'withdraw'],
-    }),
-
-});
+const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
 
 <template>
 <AppPage :tabs="tabs">
     <template v-slot:header>
-        <p>stake page header stuff</p>
+        <StakingPageHeader />
     </template>
 
     <template v-slot:stake>
@@ -38,3 +28,7 @@ export default defineComponent({
 <style lang="scss">
 
 </style>
+
+
+
+
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
new file mode 100644
index 000000000..3beaa0d97
--- /dev/null
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BigNumber, ethers } from 'ethers';
+
+import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
+import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { NativeCurrencyAddress } from 'src/antelope/types';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+
+import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
+
+
+const { t: $t } = useI18n();
+const userStore = useUserStore();
+const balancesStore = useBalancesStore();
+const chainStore = useChainStore();
+const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
+// data
+const systemTokenPrice = ref(0); // always equal to wrapped token price
+const loading = ref(true);
+
+
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenName = computed(() => chainSettings.getSystemToken().name);
+const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
+const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
+
+const totalFiatValueText = ref('--');
+
+/*
+const totalFiatValueText = computed(() => {
+    if (loading.value) {
+        return '--';
+    }
+
+    const totalBalance = +totalSystemAndWrappedBalance.value;
+    const totalFiatValue = totalBalance * systemTokenPrice.value;
+
+    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
+});
+
+
+const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
+const allBalances = computed(() => balancesStore.loggedBalances);
+const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
+const wrappedTokenBalanceBn = computed(() =>
+    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
+);
+const totalSystemAndWrappedBalance = computed(() => {
+    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
+        return '0';
+    }
+    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
+
+    return formatWei(addedBn, WEI_PRECISION);
+});
+const totalBalanceUnitsText = computed(() => {
+    const systemSymbol = chainSettings.getSystemToken().symbol;
+    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+
+    return `${systemSymbol} + ${wrappedSymbol}`;
+});
+const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const wrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
+*/
+
+const stakedFiatValueText = ref('--');
+const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
+const unstakingFiatValueText = ref('--');
+const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
+
+const cardData = computed(() => [{
+    label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    primaryText: stakedFiatValueText.value,
+    secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}]);
+
+
+// methods
+onBeforeMount(() => {
+    chainSettings.getUsdPrice().then((price) => {
+        systemTokenPrice.value = price;
+    }).finally(() => {
+        loading.value = false;
+    });
+});
+
+function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
+    return prettyPrintCurrency(
+        amount ?? BigNumber.from(0),
+        4,
+        fiatLocale.value,
+        false,
+        symbol,
+        false,
+        WEI_PRECISION,
+    );
+}
+</script>
+
+<template>
+<div class="c-staking-header">
+    <div class="text-center q-mb-xl">
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemTokenName }) }}</h5>
+        <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
+    </div>
+
+    <ScrollableInfoCards :cards="cardData" />
+</div>
+</template>
+
+<style lang="scss">
+.c-staking-header {
+    width: 100%;
+}
+</style>
diff --git a/src/router/routes.js b/src/router/routes.js
index 4d99cdc2c..2c700f75b 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -72,11 +72,11 @@ const routes = [
                 },
                 component: () => import('pages/evm/nfts/NftDetailsPage.vue'),
             },
-            // {
-            //     path: 'staking',
-            //     name: 'evm-staking',
-            //     component: () => import('pages/evm/staking/StakingPage.vue'),
-            // },
+            {
+                path: 'staking',
+                name: 'evm-staking',
+                component: () => import('pages/evm/staking/StakingPage.vue'),
+            },
             {
                 path: 'wrap',
                 name: 'evm-wrap',

From f7055bd5f36f65dfb45de7b38f6536469deee6f4 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 035/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue               |  10 ++
 src/components/evm/ScrollableInfoCards.vue  |  14 ++-
 src/i18n/en-us/index.js                     |  31 +++++-
 src/pages/evm/staking/StakingPageHeader.vue | 111 +++++++++-----------
 4 files changed, 98 insertions(+), 68 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index a8b47a003..2be56ab14 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,6 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
+                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
             </li>
 
             <li
@@ -481,6 +482,15 @@ export default defineComponent({
         }
     }
 
+    &__apy-box {
+        @include text--small;
+        background-color: rgba(255, 255, 255, 0.1);
+        color: var(--bg-color);
+        padding: 4px 8px;
+        border-radius: 4px;
+        display: inline-block;
+    }
+
     &__icon {
         // svg color overrides
         &--current-route:not(#{$this}__icon--acorn) path {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 591334a9a..1b10f0552 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -8,13 +8,21 @@ const props = defineProps<{
         primaryText?: string;
         secondaryText?: string;
         lowContrastSecondaryText?: boolean;
+        useSmallBox?: boolean;
     }[];
 }>();
 </script>
 
 <template>
 <div class="c-scrollable-info-cards">
-    <div v-for="(card, index) in cards" :key="`card-${index}`" class="c-scrollable-info-cards__card">
+    <div
+        v-for="(card, index) in cards"
+        :key="`card-${index}`"
+        :class="{
+            'c-scrollable-info-cards__card': true,
+            'c-scrollable-info-cards__card--small': !!card.useSmallBox,
+        }"
+    >
         <div class="c-scrollable-info-cards__card-header">
             <h5 class="u-text--low-contrast">
                 {{ card.label }}
@@ -66,9 +74,11 @@ const props = defineProps<{
         border: 2px solid var(--header-item-outline-color);
         width: 220px;
         flex-shrink: 0;
-
         @include sm-and-up {
             width: 300px;
+            &--small {
+                width: 220px;
+            }
         }
     }
 
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 9815d6cfb..afb5551f2 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -192,9 +192,34 @@ export default {
     evm_stake: {
         total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
         staked_card_label: 'Staked {symbol}',
-        staked_card_tooltip: 'Staked\n\n' +
-        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
-        unstaking_card_tooltip: 'Unstaking',
+        staked_card_tooltip: 'Staked tokens:\n\n' +
+        'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
+        'This includes your {stakedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_label: 'Unstaking',
+        unstaking_card_tooltip: 'Unstaking tokens:\n\n' +
+        'This reflects the total value of locked {systemSymbol} in the process of unstaking.\n' +
+        'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
+        'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
+        'During this time you cannot interact with this {systemSymbol}.',
+        withdrawable_card_label: 'Withdraw-able',
+        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
+        'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
+        'you can withdraw your {systemSymbol} from escrow.',
+        apy_card_label: 'APY',
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
+        'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
+        'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
+        'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
+        unstaking_period_card_label: 'Unstaking Period',
+        unstaking_period_card_tooltip: 'Unstaking Period:\n\n' +
+        'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
+        'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
+        tvl_card_label: 'TVL',
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 3beaa0d97..52b4b682d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -29,83 +29,63 @@ const systemTokenName = computed(() => chainSettings.getSystemToken().name);
 const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
 const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
 
-const totalFiatValueText = ref('--');
+const totalFiatValueText = ref('$ 4,324.35');
 
-/*
-const totalFiatValueText = computed(() => {
-    if (loading.value) {
-        return '--';
-    }
-
-    const totalBalance = +totalSystemAndWrappedBalance.value;
-    const totalFiatValue = totalBalance * systemTokenPrice.value;
-
-    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
-});
+const stakedFiatValueText = ref('$ 4,000.23');
+const stakedTokenBalanceBn = ref(ethers.utils.parseUnits('34021.230', WEI_PRECISION));
+const unstakingFiatValueText = ref('$ 200.72');
+const unstakingBalanceBn = ref(ethers.utils.parseUnits('1242.0312', WEI_PRECISION));
+const withdrawableFiatValueText = ref('$ 123.02');
+const withdrawableBalanceBn = ref(ethers.utils.parseUnits('245.0225', WEI_PRECISION));
 
+const apyPrittyPrint = ref('8.23%');
+const unlockPeriod = ref('10 days');
 
-const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
-const allBalances = computed(() => balancesStore.loggedBalances);
-const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
-const wrappedTokenBalanceBn = computed(() =>
-    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
-);
-const totalSystemAndWrappedBalance = computed(() => {
-    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
-        return '0';
-    }
-    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
-
-    return formatWei(addedBn, WEI_PRECISION);
-});
-const totalBalanceUnitsText = computed(() => {
-    const systemSymbol = chainSettings.getSystemToken().symbol;
-    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
+const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
+const evmNetworkName = ref('Telos EVM');
 
-    return `${systemSymbol} + ${wrappedSymbol}`;
-});
-const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const wrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
-*/
-
-const stakedFiatValueText = ref('--');
-const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
-const unstakingFiatValueText = ref('--');
-const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
-
-const cardData = computed(() => [{
+const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
     tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
     primaryText: stakedFiatValueText.value,
     secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    label: $t('evm_stake.unstaking_card_label'),
+    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
     primaryText: unstakingFiatValueText.value,
     secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
-    primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    label: $t('evm_stake.withdrawable_card_label'),
+    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    primaryText: withdrawableFiatValueText.value,
+    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
+}]);
+
+const secondLineData = computed(() => [{
+    label: $t('evm_stake.apy_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: apyPrittyPrint.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.unstaking_period_card_label'),
+    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: unlockPeriod.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.tvl_card_label'),
+    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: prettyPrintToken(tvlAmountBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
 }]);
 
 
@@ -138,12 +118,17 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 
-    <ScrollableInfoCards :cards="cardData" />
+    <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
+    <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>
 </template>
 
 <style lang="scss">
 .c-staking-header {
     width: 100%;
+
+    &__cards-second-line {
+        margin-top: 24px;
+    }
 }
 </style>

From 0a82056fd4441cb25fd909d777d668b0bb1a3d6a Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 036/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index afb5551f2..14088ecf0 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From cd772032a9b1485515736b1436e6d2d22ac2514a Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:10:04 -0400
Subject: [PATCH 037/268] use i18n for apy label

---
 src/components/evm/AppNav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 2be56ab14..9fb48b9c9 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,7 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
+                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
             </li>
 
             <li

From c63495e48a86befadaa4dd889dd54af04a1f1a41 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 038/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 14088ecf0..afb5551f2 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 48d2ab1d46e3a3fb8057f6f639dafc4658055f14 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 039/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index afb5551f2..14088ecf0 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From b96f15e67f7c0b0a1d7910c143ada3323026052d Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 040/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue | 4 ++++
 src/i18n/en-us/index.js       | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 9fb48b9c9..fe9b79a2b 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,7 +279,11 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
+<<<<<<< HEAD
                 <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
+=======
+                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
+>>>>>>> a8908111 (adding page header component for Staking Section)
             </li>
 
             <li
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 14088ecf0..afb5551f2 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 8f004a1d8d91812c7f27742e40b12634643065b7 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:10:04 -0400
Subject: [PATCH 041/268] use i18n for apy label

---
 src/components/evm/AppNav.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index fe9b79a2b..9fb48b9c9 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,11 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-<<<<<<< HEAD
                 <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
-=======
-                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
->>>>>>> a8908111 (adding page header component for Staking Section)
             </li>
 
             <li

From 9541e33b4684977623a9ef28e10d135afd60c6ee Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 22 Aug 2023 16:38:41 -0300
Subject: [PATCH 042/268] saving WIP

---
 src/antelope/chains/EVMChainSettings.ts       | 47 ++++++++--
 .../chains/evm/telos-evm-testnet/index.ts     |  5 ++
 src/antelope/chains/evm/telos-evm/index.ts    |  5 ++
 src/antelope/stores/balances.ts               |  3 +-
 src/antelope/stores/chain.ts                  | 71 ++++++++++++++--
 src/antelope/stores/evm.ts                    | 20 +++--
 src/antelope/types/ChainSettings.ts           |  3 +
 src/antelope/wallets/index.ts                 |  2 +-
 src/components/evm/AppNav.vue                 | 27 +++++-
 src/components/evm/ScrollableInfoCards.vue    | 28 +++++-
 src/i18n/en-us/index.js                       |  1 +
 src/pages/evm/staking/StakingPageHeader.vue   | 85 +++++++++++++------
 12 files changed, 244 insertions(+), 53 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 83e9c9e9b..2675466b3 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -42,6 +42,9 @@ export default abstract class EVMChainSettings implements ChainSettings {
     // External query API support
     protected hyperion: AxiosInstance = axios.create({ baseURL: this.getHyperionEndpoint() });
 
+    // External query API support
+    protected api: AxiosInstance = axios.create({ baseURL: this.getApiEndpoint() });
+
     // External trusted metadata bucket for EVM contracts
     protected contractsBucket: AxiosInstance = axios.create({ baseURL: this.getTrustedContractsBucket() });
 
@@ -61,7 +64,10 @@ export default abstract class EVMChainSettings implements ChainSettings {
     tokenListPromise: Promise<TokenClass[]> | null = null;
 
     // EvmContracts cache mapped by address
-    protected contracts: Record<string, EvmContract | false> = {};
+    protected contracts: Record<string, {
+        promise: Promise<EvmContract | false>;
+        resolve?: (value: EvmContract | false) => void;
+    }> = {};
 
     constructor(network: string) {
         this.network = network;
@@ -214,6 +220,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract getDisplay(): string;
     abstract getHyperionEndpoint(): string;
     abstract getRPCEndpoint(): RpcEndpoint;
+    abstract getApiEndpoint(): string;
     abstract getPriceData(): Promise<PriceChartData>;
     abstract getUsdPrice(): Promise<number>;
     abstract getBuyMoreOfTokenLink(): string;
@@ -226,6 +233,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract hasIndexerSupport(): boolean;
     abstract trackAnalyticsEvent(params: Record<string, unknown>): void;
 
+    async getApy(): Promise<string> {
+        const response = await this.api.get('apy/evm');
+        return response.data as string;
+    }
+
     async getBalances(account: string): Promise<TokenBalance[]> {
         if (!this.hasIndexerSupport()) {
             console.error('Indexer API not supported for this chain:', this.getNetwork());
@@ -351,22 +363,47 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return `${token.symbol}-${token.address}-${this.getNetwork()}`;
     }
 
-    getContract(address: string): EvmContract | false | null {
+    async getContract(address: string): Promise<EvmContract | false | null> {
         const key = address.toLowerCase();
-        return this.contracts[key] ?? null;
+        const returnValue = this.contracts[key]?.promise ?? null;
+        if (!this.contracts[key]) {
+            this.contracts[key] = {
+                promise: Promise.resolve(false),
+            };
+            this.contracts[key].promise = new Promise((resolve) => {
+                this.contracts[key].resolve = resolve;
+            });
+        }
+        return returnValue;
     }
 
     addContract(address: string, contract: EvmContract) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
-            this.contracts[key] = contract;
+            this.contracts[key] = {
+                promise: Promise.resolve(contract),
+            };
+        } else {
+            if (this.contracts[key].resolve) {
+                this.contracts[key].resolve?.(contract);
+            } else {
+                console.error('Error: Contract already exists', address);
+            }
         }
     }
 
     setContractAsNotExisting(address: string) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
-            this.contracts[key] = false;
+            this.contracts[key] = {
+                promise: Promise.resolve(false),
+            };
+        } else {
+            if (this.contracts[key].resolve) {
+                this.contracts[key].resolve?.(false);
+            } else {
+                console.error('Error: Contract already exists', address);
+            }
         }
     }
 
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index 4c2ed6eef..20b915bfd 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -51,6 +51,7 @@ const RPC_ENDPOINT = {
     path: '/evm',
 };
 
+const API_ENDPOINT = 'https://api-dev.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://testnet.teloscan.io';
 const ECOSYSTEM_URL = 'https://www.telos.net/ecosystem';
@@ -81,6 +82,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return RPC_ENDPOINT;
     }
 
+    getApiEndpoint(): string {
+        return API_ENDPOINT;
+    }
+
     getPriceData(): Promise<PriceChartData> {
         return api.getCoingeckoPriceChartData('telos');
     }
diff --git a/src/antelope/chains/evm/telos-evm/index.ts b/src/antelope/chains/evm/telos-evm/index.ts
index c4e4acdf9..2d98d7581 100644
--- a/src/antelope/chains/evm/telos-evm/index.ts
+++ b/src/antelope/chains/evm/telos-evm/index.ts
@@ -51,6 +51,7 @@ const RPC_ENDPOINT = {
     path: '/evm',
 };
 
+const API_ENDPOINT = 'https://api.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://teloscan.io';
 const ECOSYSTEM_URL = 'https://www.telos.net/ecosystem';
@@ -81,6 +82,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return RPC_ENDPOINT;
     }
 
+    getApiEndpoint(): string {
+        return API_ENDPOINT;
+    }
+
     getPriceData(): Promise<PriceChartData> {
         return api.getCoingeckoPriceChartData('telos');
     }
diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 013b8e374..844458825 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -177,7 +177,8 @@ export const useBalancesStore = defineStore(store_name, {
             this.trace('updateSystemTokensPrices', label);
             try {
                 // take the three system tokens
-                const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
+                const chain = useChainStore();
+                const chain_settings = chain.getChain(label).settings as EVMChainSettings;
                 const sysToken = chain_settings.getSystemToken();
                 const wrpToken = chain_settings.getWrappedSystemToken();
 
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index e22c87ca1..2ba011543 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -17,6 +17,8 @@
 
 import { defineStore } from 'pinia';
 import {
+    useAccountStore,
+    useEVMStore,
     useFeedbackStore,
 } from 'src/antelope';
 
@@ -70,6 +72,7 @@ export interface ChainModel {
 
 export interface EvmChainModel {
     apy: string;
+    stakeRatio: ethers.BigNumber;
     gasPrice: ethers.BigNumber;
     settings: EVMChainSettings;
     tokens: TokenClass[];
@@ -84,11 +87,12 @@ export interface NativeChainModel {
 const newChainModel = (network: string, isNative: boolean): ChainModel => {
     const model = {
         apy: '',
+        stakeRatio: ethers.constants.Zero,
         settings: settings[network],
         tokens: [],
     } as ChainModel;
     if (!isNative) {
-        (model as EvmChainModel).gasPrice = ethers.BigNumber.from(0);
+        (model as EvmChainModel).gasPrice = ethers.constants.Zero;
     }
     return model;
 };
@@ -116,6 +120,7 @@ export const useChainStore = defineStore(store_name, {
         getExplorerUrl: () => (network: string) => (settings[network] as EVMChainSettings).getExplorerUrl(),
         getEcosystemUrl: () => (network: string) => (settings[network] as EVMChainSettings).getEcosystemUrl(),
         getNetworkSettings: () => (network: string) => settings[network],
+        getStakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).stakeRatio ?? ethers.constants.Zero,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -129,6 +134,7 @@ export const useChainStore = defineStore(store_name, {
                     this.updateSettings(label),
                     this.updateApy(label),
                     this.updateGasPrice(label),
+                    this.updateStakedRatio(label),
                 ]);
             } catch (error) {
                 console.error(error);
@@ -153,11 +159,7 @@ export const useChainStore = defineStore(store_name, {
             this.trace('updateApy', label);
             const chain = this.getChain(label);
             try {
-                if (chain.settings.isNative()) {
-                    chain.apy = await (chain.settings as NativeChainSettings).getApy();
-                } else {
-                    chain.apy = '';
-                }
+                chain.apy = await chain.settings.getApy();
             } catch (error) {
                 console.error(error);
                 throw new Error('antelope.chain.error_apy');
@@ -165,6 +167,57 @@ export const useChainStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading('updateApy');
             }
         },
+        async actualUpdateStakedRatio(label: string): Promise<ethers.BigNumber> {
+            // first we need the contract instance to be able to execute queries
+            this.trace('actualUpdateStakedRatio', label);
+            useFeedbackStore().setLoading('actualUpdateStakedRatio');
+            const evm = useEVMStore();
+            const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
+            const sysToken = chain_settings.getSystemToken();
+            const stkToken = chain_settings.getStakedSystemToken();
+            const authenticator = useAccountStore().getEVMAuthenticator(label);
+            if (!authenticator) {
+                useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+                this.trace('actualUpdateStakedRatio', label, '-> no authenticator');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contract = await evm.getContract(authenticator, stkToken.address, stkToken.type);
+            if (!contract) {
+                useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+                this.trace('actualUpdateStakedRatio', label, '-> no contract');
+                return ethers.constants.Zero;
+            }
+            const contractInstance = await contract.getContractInstance();
+            // Now we preview a deposit of 1 SYS to get the ratio
+            const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
+            const ratio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+
+            // Finally we update the store
+            this.setStakedRatio(label, ratio);
+            useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+            return ratio;
+        },
+        async updateStakedRatio(label: string): Promise<ethers.BigNumber> {
+            const accountModel = useAccountStore().getAccount(label);
+            if (accountModel && accountModel.account) {
+                // if the account is already logged, we can update the staked ratio
+                return this.actualUpdateStakedRatio(label);
+            } else {
+                // if the account is not logged, we need to wait for the login and then update the staked ratio
+                return new Promise((resolve) => {
+                    const sub = getAntelope().events.onAccountChanged.subscribe((result) => {
+                        if (result.label === label) {
+                            sub.unsubscribe();
+                            if (result.account) {
+                                // we need the user to be logged because the way of getting the staked ratio is by
+                                // executing an action from contract and that internally attempts retrieve the account from the provided signer
+                                resolve(this.actualUpdateStakedRatio(label));
+                            }
+                        }
+                    });
+                });
+            }
+        },
         async updateGasPrice(label: string): Promise<void> {
             useFeedbackStore().setLoading('updateGasPrice');
             this.trace('updateGasPrice');
@@ -211,6 +264,7 @@ export const useChainStore = defineStore(store_name, {
                 // make the change only if they are different
                 if (network !== this.__chains[label]?.settings.getNetwork()) {
                     this.__chains[label] = newChainModel(network, settings[network].isNative());
+                    this.trace('setChain', label, network, '--> void this.updateChainData(label);');
                     void this.updateChainData(label);
                     getAntelope().events.onNetworkChanged.next(
                         { label, chain: this.__chains[label] },
@@ -220,6 +274,11 @@ export const useChainStore = defineStore(store_name, {
                 throw new AntelopeError('antelope.chain.error_invalid_network', { network });
             }
         },
+        setStakedRatio(label: string, ratio: ethers.BigNumber) {
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
+            (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
+        },
     },
 });
 
diff --git a/src/antelope/stores/evm.ts b/src/antelope/stores/evm.ts
index 15087714e..5146a05af 100644
--- a/src/antelope/stores/evm.ts
+++ b/src/antelope/stores/evm.ts
@@ -62,7 +62,7 @@ export interface EVMState {
 const store_name = 'evm';
 
 const createManager = (authenticator: EVMAuthenticator):EvmContractManagerI => ({
-    getSigner: async () => toRaw((await authenticator.web3Provider()).getSigner()),
+    getSigner: async () => toRaw((await authenticator.web3Provider()).getSigner(useAccountStore().getAccount(authenticator.label).account)),
     getWeb3Provider: () => authenticator.web3Provider(),
     getFunctionIface: (hash:string) => toRaw(useEVMStore().getFunctionIface(hash)),
     getEventIface: (hash:string) => toRaw(useEVMStore().getEventIface(hash)),
@@ -332,7 +332,8 @@ export const useEVMStore = defineStore(store_name, {
             // Get from already queried contracts, add token data if needed & not present
             // (ie: queried beforehand w/o suspectedToken or a wrong suspectedToken)
             const chain_settings = useChainStore().getChain(authenticator.label).settings as EVMChainSettings;
-            const cached = chain_settings.getContract(addressLower);
+            const cached = await chain_settings.getContract(addressLower);
+            this.trace('getContract', address, 'cached:', cached);
             // If cached is null, it means this is the first time this address is queried
             if (cached !== null) {
                 if (
@@ -347,10 +348,6 @@ export const useEVMStore = defineStore(store_name, {
                 }
             }
 
-
-            // We mark this address as not existing so we don't query it again
-            chain_settings.setContractAsNotExisting(addressLower);
-
             // Then we try to get the contract creation info. If it fails, we never overwrite the previous call to set contract as not existing
             const creationInfo = await this.getContractCreation(authenticator, addressLower);
             // The the contract passes the creation info check,
@@ -369,8 +366,15 @@ export const useEVMStore = defineStore(store_name, {
                 return contract;
             }
 
-            this.trace('getContract', 'returning empty contract', address, creationInfo);
-            return await this.getEmptyContract(authenticator, addressLower, creationInfo);
+            if (creationInfo) {
+                this.trace('getContract', 'returning empty contract', address, creationInfo);
+                return await this.getEmptyContract(authenticator, addressLower, creationInfo);
+            } else {
+                // We mark this address as not existing so we don't query it again
+                this.trace('getContract', 'returning null', address);
+                chain_settings.setContractAsNotExisting(addressLower);
+                return null;
+            }
         },
 
         async checkBucket(authenticator: EVMAuthenticator, address:string): Promise<EvmContractMetadata | null> {
diff --git a/src/antelope/types/ChainSettings.ts b/src/antelope/types/ChainSettings.ts
index ff6ee121b..d21f60f07 100644
--- a/src/antelope/types/ChainSettings.ts
+++ b/src/antelope/types/ChainSettings.ts
@@ -11,11 +11,14 @@ export interface ChainSettings {
     getSmallLogoPath(): string;
     getLargeLogoPath(): string;
     getChainId(): string;
+    getHyperionEndpoint(): string;
     getRPCEndpoint(): RpcEndpoint;
+    getApiEndpoint(): string;
     getPriceData(): Promise<PriceChartData>;
     getUsdPrice(): Promise<number>;
     getSystemTokens(): TokenClass[];
     getNFTsInventory(address: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>;
     getNFTsCollection(contract: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>;
     trackAnalyticsEvent(params: Record<string, unknown>): void;
+    getApy(): Promise<string>;
 }
diff --git a/src/antelope/wallets/index.ts b/src/antelope/wallets/index.ts
index 33b7ee216..c29fab7e1 100644
--- a/src/antelope/wallets/index.ts
+++ b/src/antelope/wallets/index.ts
@@ -26,12 +26,12 @@ export class AntelopeWallets {
         this.trace('getAutenticator', name);
         return this.authenticators.get(name);
     }
+
 }
 
 export * from 'src/antelope/wallets/authenticators/EVMAuthenticator';
 export * from 'src/antelope/wallets/authenticators/InjectedProviderAuth';
 export * from 'src/antelope/wallets/authenticators/MetamaskAuth';
 export * from 'src/antelope/wallets/authenticators/OreIdAuth';
-export * from 'src/antelope/wallets/authenticators/SafePalAuth';
 export * from 'src/antelope/wallets/authenticators/WalletConnectAuth';
 export * from 'src/antelope/wallets/authenticators/SafePalAuth';
diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 9fb48b9c9..a7e94624c 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -5,7 +5,7 @@ import InlineSvg from 'vue-inline-svg';
 import UserInfo from 'components/evm/UserInfo.vue';
 import { getAntelope, useChainStore } from 'src/antelope';
 import EVMLoginButtons from 'pages/home/EVMLoginButtons.vue';
-import { getShortenedHash } from 'src/antelope/stores/utils';
+import { getShortenedHash, prettyPrintBalance } from 'src/antelope/stores/utils';
 
 const ant = getAntelope();
 const accountStore = ant.stores.account;
@@ -25,6 +25,17 @@ export default defineComponent({
         notifyOnSuccessfulLogin: false,
     }),
     computed: {
+        isLoadingApy() {
+            return this.prettyPrintApy === '';
+        },
+        prettyPrintApy() {
+            const apy = chainStore.currentEvmChain?.apy;
+            if (apy) {
+                return apy + '%';
+            } else {
+                return '';
+            }
+        },
         showMenuIcon() {
             return this.$q.screen.lt.md && !this.showBackButton;
         },
@@ -279,7 +290,14 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
+                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }}
+                    <q-spinner
+                        v-if="isLoadingApy"
+                        color="white"
+                        class="c-app-nav__apy-spinner"
+                    />
+                    <b> {{ prettyPrintApy }}</b>
+                </span>
             </li>
 
             <li
@@ -491,6 +509,11 @@ export default defineComponent({
         display: inline-block;
     }
 
+    &__apy-spinner {
+        size: 16px;
+        margin-top: -5px;
+    }
+
     &__icon {
         // svg color overrides
         &--current-route:not(#{$this}__icon--acorn) path {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 1b10f0552..2285e02cd 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -9,6 +9,8 @@ const props = defineProps<{
         secondaryText?: string;
         lowContrastSecondaryText?: boolean;
         useSmallBox?: boolean;
+        isPrimaryLoading?: boolean;
+        isSecondaryLoading?: boolean;
     }[];
 }>();
 </script>
@@ -35,14 +37,23 @@ const props = defineProps<{
             />
         </div>
 
-        <h3>{{ card.primaryText }}</h3>
+        <h3 v-if="card.isPrimaryLoading" >
+            <q-spinner-dots class="c-scrollable-info-cards__primary-loading"  color="primary" />
+        </h3>
+        <h3 v-else class="c-scrollable-info-cards__primary-text">
+            {{ card.primaryText }}
+        </h3>
+
         <span
             v-if="card.secondaryText"
             :class="{
-                'u-text--low-contrast': card.lowContrastSecondaryText
+                'c-scrollable-info-cards__low-contrast': card.lowContrastSecondaryText
             }"
         >
-            {{ card.secondaryText }}
+            <q-spinner-dots v-if="card.isSecondaryLoading" class="c-scrollable-info-cards__secondary-loading" color="primary" />
+            <span v-else class="c-scrollable-info-cards__secondary-text">
+                {{ card.secondaryText }}
+            </span>
         </span>
     </div>
 </div>
@@ -67,6 +78,17 @@ const props = defineProps<{
         margin: auto;
     }
 
+    &__primary-loading {
+        margin-left: 4px;
+    }
+
+    &__secondary-loading {
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
+    }
+
+
     &__card {
         background-color: var(--bg-color);
         padding: 12px;
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index afb5551f2..ce66f87d9 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -519,6 +519,7 @@ export default {
             error_update_data: 'Error in updating data',
             error_apy: 'Error in getting APY',
             error_invalid_network: 'Invalid network',
+            error_no_default_authenticator: 'No default authenticator found',
         },
         account: {
             error_login_native: 'An error has occurred trying to login to the native chain',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 52b4b682d..d5fcb9209 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -4,41 +4,70 @@ import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
 import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
-import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
 
 import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
 
-
+const label = 'current';
 const { t: $t } = useI18n();
 const userStore = useUserStore();
 const balancesStore = useBalancesStore();
 const chainStore = useChainStore();
 const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
 // data
-const systemTokenPrice = ref(0); // always equal to wrapped token price
 const loading = ref(true);
 
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
 const fiatCurrency = computed(() => userStore.fiatCurrency);
-const systemTokenName = computed(() => chainSettings.getSystemToken().name);
-const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
-const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
+const systemToken = chainSettings.getSystemToken();
+const stakedToken = chainSettings.getStakedSystemToken();
 
 const totalFiatValueText = ref('$ 4,324.35');
 
-const stakedFiatValueText = ref('$ 4,000.23');
-const stakedTokenBalanceBn = ref(ethers.utils.parseUnits('34021.230', WEI_PRECISION));
+// First cell: Staked
+const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || !stakedRatio.value.isZero());
+const stakedExpressedInSystemBalanceBn = computed(() => {
+    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(stakedRatio.value, stakedToken.decimals);
+        return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const systemTokenPrice = ref(systemToken.price.value);
+const stakedFiatValueBn = computed(() => {
+    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(stakedExpressedInSystemBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+
+// Second cell: Unstaking
 const unstakingFiatValueText = ref('$ 200.72');
-const unstakingBalanceBn = ref(ethers.utils.parseUnits('1242.0312', WEI_PRECISION));
-const withdrawableFiatValueText = ref('$ 123.02');
-const withdrawableBalanceBn = ref(ethers.utils.parseUnits('245.0225', WEI_PRECISION));
+const unstakingBalanceBn = ref(stakedTokenBalanceBn);
 
-const apyPrittyPrint = ref('8.23%');
+// Third cell: Withdrawable
+const withdrawableFiatValueText = ref('$ 123.02');
+const withdrawableBalanceBn = ref(stakedRatio);
+
+const apyPrittyPrint = computed(() => {
+    const apy = chainStore.currentEvmChain?.apy;
+    if (apy) {
+        return apy + '%';
+    } else {
+        return '--';
+    }
+});
+const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref('10 days');
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
@@ -46,44 +75,46 @@ const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
 const evmNetworkName = ref('Telos EVM');
 
 const firstLineData = computed(() => [{
-    label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
-    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
-    primaryText: stakedFiatValueText.value,
-    secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
+    label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
+    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
+    primaryText: prettyPrintToken(stakedFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isStakedLoading.value ? '' : prettyPrintToken(stakedExpressedInSystemBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
+    isPrimaryLoading: isStakedLoading.value,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.unstaking_card_label'),
-    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
     primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.withdrawable_card_label'),
-    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
     primaryText: withdrawableFiatValueText.value,
-    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemTokenSymbol.value),
+    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }]);
 
 const secondLineData = computed(() => [{
-    label: $t('evm_stake.apy_card_label', { symbol: systemTokenSymbol.value }),
-    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    label: $t('evm_stake.apy_card_label', { symbol: systemToken.symbol }),
+    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
     secondaryText: apyPrittyPrint.value,
     lowContrastSecondaryText: false,
+    isSecondaryLoading: apyisLoading.value,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.unstaking_period_card_label'),
-    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
     secondaryText: unlockPeriod.value,
     lowContrastSecondaryText: false,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.tvl_card_label'),
-    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
-    secondaryText: prettyPrintToken(tvlAmountBn.value, systemTokenSymbol.value),
+    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
+    secondaryText: prettyPrintToken(tvlAmountBn.value, systemToken.symbol),
     lowContrastSecondaryText: false,
     useSmallBox: true,
 }]);
@@ -92,7 +123,7 @@ const secondLineData = computed(() => [{
 // methods
 onBeforeMount(() => {
     chainSettings.getUsdPrice().then((price) => {
-        systemTokenPrice.value = price;
+        // systemTokenPrice.value = price;
     }).finally(() => {
         loading.value = false;
     });
@@ -114,7 +145,7 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 <template>
 <div class="c-staking-header">
     <div class="text-center q-mb-xl">
-        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemTokenName }) }}</h5>
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 

From d367906c1b0c6ec7da4294b67fc7889cee2a0902 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 23 Aug 2023 14:01:24 -0300
Subject: [PATCH 043/268] saving WIP

---
 src/antelope/stores/chain.ts                | 21 +++++++++++++++------
 src/pages/evm/staking/StakingPageHeader.vue | 11 +++++++++--
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 2ba011543..66eb3d516 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -73,6 +73,7 @@ export interface ChainModel {
 export interface EvmChainModel {
     apy: string;
     stakeRatio: ethers.BigNumber;
+    unstakeRatio: ethers.BigNumber;
     gasPrice: ethers.BigNumber;
     settings: EVMChainSettings;
     tokens: TokenClass[];
@@ -88,6 +89,7 @@ const newChainModel = (network: string, isNative: boolean): ChainModel => {
     const model = {
         apy: '',
         stakeRatio: ethers.constants.Zero,
+        unstakeRatio: ethers.constants.Zero,
         settings: settings[network],
         tokens: [],
     } as ChainModel;
@@ -121,6 +123,7 @@ export const useChainStore = defineStore(store_name, {
         getEcosystemUrl: () => (network: string) => (settings[network] as EVMChainSettings).getEcosystemUrl(),
         getNetworkSettings: () => (network: string) => settings[network],
         getStakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).stakeRatio ?? ethers.constants.Zero,
+        getUnstakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).unstakeRatio ?? ethers.constants.Zero,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -167,7 +170,7 @@ export const useChainStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading('updateApy');
             }
         },
-        async actualUpdateStakedRatio(label: string): Promise<ethers.BigNumber> {
+        async actualUpdateStakedRatio(label: string): Promise<void> {
             // first we need the contract instance to be able to execute queries
             this.trace('actualUpdateStakedRatio', label);
             useFeedbackStore().setLoading('actualUpdateStakedRatio');
@@ -185,19 +188,20 @@ export const useChainStore = defineStore(store_name, {
             if (!contract) {
                 useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
                 this.trace('actualUpdateStakedRatio', label, '-> no contract');
-                return ethers.constants.Zero;
+                return;
             }
             const contractInstance = await contract.getContractInstance();
             // Now we preview a deposit of 1 SYS to get the ratio
             const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
-            const ratio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+            const stakedRatio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+            const unstakedRatio:ethers.BigNumber = await contractInstance.previewWithdraw(oneSys);
 
             // Finally we update the store
-            this.setStakedRatio(label, ratio);
+            this.setStakedRatio(label, stakedRatio);
+            this.setUnstakedRatio(label, unstakedRatio);
             useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
-            return ratio;
         },
-        async updateStakedRatio(label: string): Promise<ethers.BigNumber> {
+        async updateStakedRatio(label: string): Promise<void> {
             const accountModel = useAccountStore().getAccount(label);
             if (accountModel && accountModel.account) {
                 // if the account is already logged, we can update the staked ratio
@@ -279,6 +283,11 @@ export const useChainStore = defineStore(store_name, {
             this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
         },
+        setUnstakedRatio(label: string, ratio: ethers.BigNumber) {
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            this.trace('setUnstakedRatio', label, ratio.toString(), ratioNumber);
+            (this.__chains[label] as EvmChainModel).unstakeRatio = ratio;
+        },
     },
 });
 
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index d5fcb9209..65b9bee54 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -32,10 +32,14 @@ const totalFiatValueText = ref('$ 4,324.35');
 // First cell: Staked
 const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
 const stakedRatio = computed(() => chainStore.getStakedRatio(label));
-const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || !stakedRatio.value.isZero());
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
     if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
-        const ratioNumber = ethers.utils.formatUnits(stakedRatio.value, stakedToken.decimals);
+        console.log('stakedRatio', stakedRatio.value.toString());
+        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
+        console.log('inverseRatio', inverseRatio.toString());
+        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
+        console.log('ratioNumber', ratioNumber);
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -149,6 +153,9 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 
+    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
+    <div>{{ stakedRatio?.toString() }}</div>
+
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 4865998c093b8ac77aaee79a5a9c53dad8e2c8fe Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 24 Aug 2023 20:00:04 -0300
Subject: [PATCH 044/268] Fetching real Rex data for the staking page header

---
 src/antelope/chains/EVMChainSettings.ts       |   1 +
 .../chains/evm/telos-evm-testnet/index.ts     |   6 +-
 src/antelope/chains/evm/telos-evm/index.ts    |   6 +-
 src/antelope/stores/rex.ts                    | 141 +++++++++++++++++-
 src/pages/evm/staking/StakingPageHeader.vue   |  65 ++++++--
 5 files changed, 200 insertions(+), 19 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 2675466b3..b406f0d5d 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -216,6 +216,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract getSystemToken(): TokenClass;
     abstract getStakedSystemToken(): TokenClass;
     abstract getWrappedSystemToken(): TokenClass;
+    abstract getEscrowContractAddress(): string;
     abstract getChainId(): string;
     abstract getDisplay(): string;
     abstract getHyperionEndpoint(): string;
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index 20b915bfd..7f1778c14 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -50,7 +50,7 @@ const RPC_ENDPOINT = {
     port: 443,
     path: '/evm',
 };
-
+const ESCROW_CONTRACT_ADDRESS = '0x7E9cF9fBc881652B05BB8F26298fFAB538163b6f';
 const API_ENDPOINT = 'https://api-dev.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://testnet.teloscan.io';
@@ -102,6 +102,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return W_TOKEN;
     }
 
+    getEscrowContractAddress(): string {
+        return ESCROW_CONTRACT_ADDRESS;
+    }
+
     async getUsdPrice(): Promise<number> {
         if (this.hasIndexerSupport()) {
             const nativeTokenSymbol = this.getSystemToken().symbol;
diff --git a/src/antelope/chains/evm/telos-evm/index.ts b/src/antelope/chains/evm/telos-evm/index.ts
index 2d98d7581..06a4538fc 100644
--- a/src/antelope/chains/evm/telos-evm/index.ts
+++ b/src/antelope/chains/evm/telos-evm/index.ts
@@ -50,7 +50,7 @@ const RPC_ENDPOINT = {
     port: 443,
     path: '/evm',
 };
-
+const ESCROW_CONTRACT_ADDRESS = '0x95F5713A1422Aa3FBD3DCB8D553945C128ee3855';
 const API_ENDPOINT = 'https://api.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://teloscan.io';
@@ -102,6 +102,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return W_TOKEN;
     }
 
+    getEscrowContractAddress(): string {
+        return ESCROW_CONTRACT_ADDRESS;
+    }
+
     async getUsdPrice(): Promise<number> {
         if (this.hasIndexerSupport()) {
             const nativeTokenSymbol = this.getSystemToken().symbol;
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 6c4006b34..50198bcd6 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -5,14 +5,47 @@
  * the state of that account in the REX system.
  */
 
+import { ethers } from 'ethers';
 import { defineStore } from 'pinia';
+import { filter } from 'rxjs';
 import {
-    createInitFunction,
+    isTracingAll,
     createTraceFunction,
+    useFeedbackStore,
 } from 'src/antelope/stores/feedback';
+import { AntelopeError, Label } from 'src/antelope/types';
+import { toRaw } from 'vue';
+import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
+import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+
+
+
+export interface EvmRexDeposit {
+    amount: ethers.BigNumber;
+    until: ethers.BigNumber;
+}
+
+export interface RexModel {
+    withdrawable: ethers.BigNumber;
+    balance: ethers.BigNumber;
+    totalStaking: ethers.BigNumber;
+}
+
+export interface NativeRexModel extends RexModel {
+    _: boolean; // dummy property to avoid lint issues
+}
+
+export interface EvmRexModel extends RexModel {
+    withdrawable: ethers.BigNumber;
+    deposits: EvmRexDeposit[];
+    balance: ethers.BigNumber;
+    totalStaking: ethers.BigNumber;
+}
+
 
 export interface RexState {
-    __: string;
+    __rexData: { [label: Label]: RexModel };
 }
 
 const store_name = 'rex';
@@ -20,13 +53,113 @@ const store_name = 'rex';
 export const useRexStore = defineStore(store_name, {
     state: (): RexState => (rexInitialState),
     getters: {
+        getRexData: state => (label: string) => state.__rexData[label] ?? null,
     },
     actions: {
         trace: createTraceFunction(store_name),
-        init: createInitFunction(store_name),
+        init: () => {
+            useFeedbackStore().setDebug(store_name, isTracingAll());
+            getAntelope().events.onAccountChanged.pipe(
+                filter(({ label, account }) => !!label && !!account),
+            ).subscribe({
+                next: async ({ label, account }) => {
+                    if (label === 'current') {
+                        await useRexStore().updateRexDataForAccount(label, toRaw(account));
+                    }
+                },
+            });
+        },
+        async getContractInstance(label: string, address: string) {
+            const authenticator = useAccountStore().getEVMAuthenticator(label);
+            if (!authenticator) {
+                this.trace('getStakedSystemContractInstance', label, '-> no authenticator');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contract = await useEVMStore().getContract(authenticator, address);
+            if (!contract) {
+                this.trace('getStakedSystemContractInstance', label, '-> no contract');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contractInstance = await contract.getContractInstance();
+            return contractInstance;
+        },
+        async getStakedSystemContractInstance(label: string) {
+            const address = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().address;
+            return this.getContractInstance(label, address);
+        },
+        async getEscrowContractInstance(label: string) {
+            const address = (useChainStore().getChain(label).settings as EVMChainSettings).getEscrowContractAddress();
+            return this.getContractInstance(label, address);
+        },
+        async updateTotalStaking(label: string) {
+            this.trace('updateTotalStaking', label);
+            const contract = await this.getStakedSystemContractInstance(label);
+            const totalStaking = await contract.totalAssets();
+            this.setTotalStaking(label, totalStaking);
+        },
+        async updateRexDataForAccount(label: string, account: AccountModel | null) {
+            this.trace('updateRexDataForAccount', label, account);
+            useFeedbackStore().setLoading('updateRexDataForAccount');
+            try {
+                await Promise.all([
+                    this.updateWithdrawable(label),
+                    this.updateDeposits(label),
+                    this.updateBalance(label),
+                    this.updateTotalStaking(label),
+                ]);
+            } catch (error) {
+                console.error(error);
+                useFeedbackStore().unsetLoading('updateRexDataForAccount');
+            }
+        },
+        async updateWithdrawable(label: string) {
+            this.trace('updateWithdrawable', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const withdrawable = await contract.maxWithdraw(address);
+            this.setWithdrawable(label, withdrawable);
+        },
+        async updateDeposits(label: string) {
+            this.trace('updateDeposits', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const deposits = await contract.depositsOf(address);
+            this.setDeposits(label, deposits);
+        },
+        async updateBalance(label: string) {
+            this.trace('updateBalance', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const balance = await contract.balanceOf(address);
+            this.setBalance(label, balance);
+        },
+        // commits ---------------
+        setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(withdrawable, 18));
+            this.trace('setWithdrawable', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).withdrawable = withdrawable;
+        },
+        setDeposits(label: string, deposits: EvmRexDeposit[]) {
+            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, 18))));
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).deposits = deposits;
+        },
+        setBalance(label: string, balance: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(balance, 18));
+            this.trace('setBalance', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).balance = balance;
+        },
+        setTotalStaking(label: string, totalStaking: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(totalStaking, 18));
+            this.trace('setTotalStaking', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).totalStaking = totalStaking;
+        },
     },
 });
 
 const rexInitialState: RexState = {
-    __: '',
+    __rexData: {},
 };
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 65b9bee54..c602a537d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -3,7 +3,7 @@ import { computed, onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
-import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
+import { useUserStore, useBalancesStore, useChainStore, useRexStore } from 'src/antelope';
 import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
@@ -45,9 +45,9 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = ref(systemToken.price.value);
+const systemTokenPrice = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value);
 const stakedFiatValueBn = computed(() => {
-    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value) {
+    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
         return convertCurrency(stakedExpressedInSystemBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
     } else {
@@ -56,12 +56,42 @@ const stakedFiatValueBn = computed(() => {
 });
 
 // Second cell: Unstaking
-const unstakingFiatValueText = ref('$ 200.72');
-const unstakingBalanceBn = ref(stakedTokenBalanceBn);
+const unstakingBalanceBn = computed(() => {
+    const rexData = useRexStore().getRexData(label);
+    if (rexData) {
+        const totalBalance = rexData.balance;
+        const withdrawableBalance = rexData.withdrawable;
+        if (totalBalance && withdrawableBalance) {
+            return totalBalance.sub(withdrawableBalance);
+        } else {
+            return undefined;
+        }
+    } else {
+        return undefined;
+    }
+});
+const unstakingFiatValueBn = computed(() => {
+    if (unstakingBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(unstakingBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const isUnstakingLoading = computed(() => unstakingBalanceBn.value === undefined);
 
 // Third cell: Withdrawable
-const withdrawableFiatValueText = ref('$ 123.02');
-const withdrawableBalanceBn = ref(stakedRatio);
+const withdrawableBalanceBn = computed(() => useRexStore().getRexData(label)?.withdrawable);
+const withdrawableFiatValueBn = computed(() => {
+    if (withdrawableBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(withdrawableBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const isWithdrawableLoading = computed(() => withdrawableBalanceBn.value === undefined);
+
 
 const apyPrittyPrint = computed(() => {
     const apy = chainStore.currentEvmChain?.apy;
@@ -75,8 +105,15 @@ const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref('10 days');
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
-const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
-const evmNetworkName = ref('Telos EVM');
+const tvlAmountBn = computed(() => {
+    const totalStaking = useRexStore().getRexData(label)?.totalStaking;
+    if (totalStaking) {
+        return totalStaking;
+    } else {
+        return undefined;
+    }
+});
+const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
 const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
@@ -89,16 +126,18 @@ const firstLineData = computed(() => [{
 }, {
     label: $t('evm_stake.unstaking_card_label'),
     tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
-    primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
+    primaryText: prettyPrintToken(unstakingFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isUnstakingLoading.value ? '' : prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
+    isPrimaryLoading: isUnstakingLoading.value,
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.withdrawable_card_label'),
     tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
-    primaryText: withdrawableFiatValueText.value,
-    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
+    primaryText: prettyPrintToken(withdrawableFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isWithdrawableLoading.value ? '' : prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
+    isPrimaryLoading: isWithdrawableLoading.value,
     useSmallBox: true,
 }]);
 

From ad0c0a526e3f0a16dddd75b6b3f9b574d46b3a19 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 10:19:53 -0300
Subject: [PATCH 045/268] addressing feedback

---
 src/antelope/chains/EVMChainSettings.ts     | 18 ++++++++++++
 src/components/evm/ScrollableInfoCards.vue  |  6 +++-
 src/i18n/en-us/index.js                     |  7 +++--
 src/pages/evm/staking/StakingPageHeader.vue | 32 ++++++++++-----------
 4 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index b406f0d5d..d09580c80 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -364,6 +364,14 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return `${token.symbol}-${token.address}-${this.getNetwork()}`;
     }
 
+    /**
+     * This method returns the cached value for the requested contract which can be one of three values:
+     * - Promise<EvmContract> if the contract is already cached
+     * - Promise<null> if the contract was never requested before
+     * - Promise<false> if the contract was requested, not found and set as not existing (to avoid requesting it again)
+     * @param address contract requested
+     * @returns Promise for the requested contract or false if it doesn't exist
+     */
     async getContract(address: string): Promise<EvmContract | false | null> {
         const key = address.toLowerCase();
         const returnValue = this.contracts[key]?.promise ?? null;
@@ -378,6 +386,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return returnValue;
     }
 
+    /**
+     * This method adds a contract to the cache and resolves the promise for it
+     * @param address address of the contract
+     * @param contract contract instance to be cached
+     */
     addContract(address: string, contract: EvmContract) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
@@ -393,6 +406,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
         }
     }
 
+    /**
+     * This method sets a contract as not existing and resolves the promise to false for it.
+     * This is done to distinguish between a contract that was never requested before and one that was requested and not found.
+     * @param address address of the contract
+     */
     setContractAsNotExisting(address: string) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 2285e02cd..d05e600b5 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -26,7 +26,7 @@ const props = defineProps<{
         }"
     >
         <div class="c-scrollable-info-cards__card-header">
-            <h5 class="u-text--low-contrast">
+            <h5 class="c-scrollable-info-cards__card-header-label u-text--low-contrast">
                 {{ card.label }}
             </h5>
 
@@ -110,5 +110,9 @@ const props = defineProps<{
         justify-content: space-between;
         margin-bottom: 4px;
     }
+
+    &__card-header-label {
+        white-space: nowrap;
+    }
 }
 </style>
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index ce66f87d9..cfa61f30b 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -190,7 +190,7 @@ export default {
         unwrap_input_label: 'Unwrapping Amount',
     },
     evm_stake: {
-        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdrawable {token}',
         staked_card_label: 'Staked {symbol}',
         staked_card_tooltip: 'Staked tokens:\n\n' +
         'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
@@ -201,8 +201,8 @@ export default {
         'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
-        withdrawable_card_label: 'Withdraw-able',
-        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        withdrawable_card_label: 'withdrawable',
+        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
@@ -220,6 +220,7 @@ export default {
         tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
         'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
+        unstaking_period: '10 days',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index c602a537d..972d3e6b9 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -17,9 +17,6 @@ const userStore = useUserStore();
 const balancesStore = useBalancesStore();
 const chainStore = useChainStore();
 const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
-// data
-const loading = ref(true);
-
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
@@ -27,7 +24,6 @@ const fiatCurrency = computed(() => userStore.fiatCurrency);
 const systemToken = chainSettings.getSystemToken();
 const stakedToken = chainSettings.getStakedSystemToken();
 
-const totalFiatValueText = ref('$ 4,324.35');
 
 // First cell: Staked
 const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
@@ -102,7 +98,7 @@ const apyPrittyPrint = computed(() => {
     }
 });
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
-const unlockPeriod = ref('10 days');
+const unlockPeriod = ref($t('evm_stake.unstaking_period'));
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
 const tvlAmountBn = computed(() => {
@@ -115,6 +111,14 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
+// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
+const totalFiatValueBn = computed(() => {
+    const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
+    const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
+    const withdrawableFiatValue = withdrawableFiatValueBn.value ?? BigNumber.from(0);
+    return stakedFiatValue.add(unstakingFiatValue).add(withdrawableFiatValue);
+});
+
 const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
     tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
@@ -162,20 +166,14 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
-
-// methods
-onBeforeMount(() => {
-    chainSettings.getUsdPrice().then((price) => {
-        // systemTokenPrice.value = price;
-    }).finally(() => {
-        loading.value = false;
-    });
-});
-
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
+    let decimals = symbol === fiatCurrency.value ? 2 : 4;
+    if (!amount || amount.isZero()) {
+        decimals = 1;
+    }
     return prettyPrintCurrency(
         amount ?? BigNumber.from(0),
-        4,
+        decimals,
         fiatLocale.value,
         false,
         symbol,
@@ -189,7 +187,7 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 <div class="c-staking-header">
     <div class="text-center q-mb-xl">
         <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
-        <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
+        <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
     <div>{{ stakedTokenBalanceBn?.toString() }}</div>

From d396039d2bf1526ea11c320424149d2edd8ea48f Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 14:17:28 -0300
Subject: [PATCH 046/268] merging two functions into one

---
 src/antelope/chains/EVMChainSettings.ts | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index d09580c80..e229a303c 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -391,7 +391,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      * @param contract contract instance to be cached
      */
-    addContract(address: string, contract: EvmContract) {
+    addContract(address: string, contract: EvmContract | false) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
             this.contracts[key] = {
@@ -412,18 +412,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      */
     setContractAsNotExisting(address: string) {
-        const key = address.toLowerCase();
-        if (!this.contracts[key]) {
-            this.contracts[key] = {
-                promise: Promise.resolve(false),
-            };
-        } else {
-            if (this.contracts[key].resolve) {
-                this.contracts[key].resolve?.(false);
-            } else {
-                console.error('Error: Contract already exists', address);
-            }
-        }
+        return this.addContract(address, false);
     }
 
     async getEVMTransactions(filter: IndexerTransactionsFilter): Promise<IndexerAccountTransactionsResponse> {

From f90833ad63e98f71bfcb884473d5d33adf1f285f Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 11:25:05 -0300
Subject: [PATCH 047/268] addressing Erza's feedback

---
 src/antelope/chains/EVMChainSettings.ts     |  5 +-
 src/antelope/stores/chain.ts                |  6 +-
 src/antelope/stores/rex.ts                  | 62 ++++++++++++++++++---
 src/antelope/stores/utils/currency-utils.ts |  5 +-
 src/antelope/types/TokenClass.ts            |  6 +-
 src/pages/evm/staking/StakingPageHeader.vue | 19 +++++--
 src/pages/evm/wallet/SendPage.vue           | 10 ++--
 7 files changed, 88 insertions(+), 25 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index e229a303c..504cc0ca7 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -28,6 +28,7 @@ import { ethers } from 'ethers';
 import { toStringNumber } from 'src/antelope/stores/utils/currency-utils';
 import { dateIsWithinXMinutes } from 'src/antelope/stores/utils/date-utils';
 import { getAntelope } from 'src/antelope';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 
 export default abstract class EVMChainSettings implements ChainSettings {
@@ -525,10 +526,10 @@ export default abstract class EVMChainSettings implements ChainSettings {
     async getEstimatedGas(limit: number): Promise<{ system:ethers.BigNumber, fiat:ethers.BigNumber }> {
         const gasPrice: ethers.BigNumber = await this.getGasPrice();
         const tokenPrice: number = await this.getUsdPrice();
-        const price = ethers.utils.parseUnits(toStringNumber(tokenPrice), 18);
+        const price = ethers.utils.parseUnits(toStringNumber(tokenPrice), WEI_PRECISION);
         const system = gasPrice.mul(limit);
         const fiatDouble = system.mul(price);
-        const fiat = fiatDouble.div(ethers.utils.parseUnits('1', 18));
+        const fiat = fiatDouble.div(ethers.utils.parseUnits('1', WEI_PRECISION));
         return { system, fiat };
     }
     async getLatestBlock(): Promise<ethers.BigNumber> {
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 66eb3d516..349379436 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -279,12 +279,14 @@ export const useChainStore = defineStore(store_name, {
             }
         },
         setStakedRatio(label: string, ratio: ethers.BigNumber) {
-            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            const decimals = (this.getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
             this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
         },
         setUnstakedRatio(label: string, ratio: ethers.BigNumber) {
-            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            const decimals = (this.getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
             this.trace('setUnstakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).unstakeRatio = ratio;
         },
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 50198bcd6..f154ed6fd 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -18,6 +18,7 @@ import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
 import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 
 
@@ -69,6 +70,12 @@ export const useRexStore = defineStore(store_name, {
                 },
             });
         },
+        /**
+         * auxiliar method to get a contract instance. Only used internally.
+         * @param label identifies the context (network on this case) for the data
+         * @param address the contract address
+         * @returns the contract instance
+         */
         async getContractInstance(label: string, address: string) {
             const authenticator = useAccountStore().getEVMAuthenticator(label);
             if (!authenticator) {
@@ -83,35 +90,60 @@ export const useRexStore = defineStore(store_name, {
             const contractInstance = await contract.getContractInstance();
             return contractInstance;
         },
+        /**
+         * auxiliar method to get the staked system contract instance
+         * @param label identifies the context (network on this case) for the data
+         * @returns the contract instance
+         */
         async getStakedSystemContractInstance(label: string) {
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().address;
             return this.getContractInstance(label, address);
         },
+        /**
+         * auxiliar method to get the escrow contract instance
+         * @param label identifies the context (network on this case) for the data
+         * @returns the contract instance
+         */
         async getEscrowContractInstance(label: string) {
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getEscrowContractAddress();
             return this.getContractInstance(label, address);
         },
+        /**
+         * This method queries the total amount of staked tokens in the system and maintains it in the store.
+         * @param label identifies the context (network on this case) for the data
+         */
         async updateTotalStaking(label: string) {
             this.trace('updateTotalStaking', label);
             const contract = await this.getStakedSystemContractInstance(label);
             const totalStaking = await contract.totalAssets();
             this.setTotalStaking(label, totalStaking);
         },
+        /**
+         * This method shopuld be called to quiery the REX data for a given account,
+         * along with the current stato of the total staked tokens on the system.
+         * @param label identifies the context (network on this case) for the data
+         * @param account the account to update the data for
+         */
         async updateRexDataForAccount(label: string, account: AccountModel | null) {
             this.trace('updateRexDataForAccount', label, account);
             useFeedbackStore().setLoading('updateRexDataForAccount');
             try {
                 await Promise.all([
-                    this.updateWithdrawable(label),
-                    this.updateDeposits(label),
-                    this.updateBalance(label),
-                    this.updateTotalStaking(label),
+                    this.updateWithdrawable(label),  // account's data
+                    this.updateDeposits(label),      // account's data
+                    this.updateBalance(label),       // account's data
+                    this.updateTotalStaking(label),  // system's data
                 ]);
             } catch (error) {
                 console.error(error);
                 useFeedbackStore().unsetLoading('updateRexDataForAccount');
             }
         },
+        /**
+         * This method queries the withdrawable amount for a given account and maintains it in the store.
+         * The withdrawable amount is the amount of tokens that can be withdrawn from the REX system right now.
+         * @param label identifies the context (account-network) for the data
+         */
         async updateWithdrawable(label: string) {
             this.trace('updateWithdrawable', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -119,6 +151,12 @@ export const useRexStore = defineStore(store_name, {
             const withdrawable = await contract.maxWithdraw(address);
             this.setWithdrawable(label, withdrawable);
         },
+        /**
+         * This method queries the deposits for a given account and maintains it in the store.
+         * The deposits contains a list of individual whitdrawls attempts, each with an amount and a date.
+         * If the date is in the future, the amount is not available for withdrawal yet.
+         * @param label identifies the context (account-network) for the data
+         */
         async updateDeposits(label: string) {
             this.trace('updateDeposits', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -126,6 +164,11 @@ export const useRexStore = defineStore(store_name, {
             const deposits = await contract.depositsOf(address);
             this.setDeposits(label, deposits);
         },
+        /**
+         * This method queries the balance for a given account and maintains it in the store.
+         * The account's balance is the sum of all the deposits (withdrawable or not)
+         * @param label identifies the context (account-network) for the data
+         */
         async updateBalance(label: string) {
             this.trace('updateBalance', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -133,26 +176,29 @@ export const useRexStore = defineStore(store_name, {
             const balance = await contract.balanceOf(address);
             this.setBalance(label, balance);
         },
+        getStakingDecimals() {
+            return useChainStore().currentEvmChain?.settings.getStakedSystemToken().decimals || WEI_PRECISION;
+        },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(withdrawable, 18));
+            const num = parseFloat(ethers.utils.formatUnits(withdrawable, this.getStakingDecimals()));
             this.trace('setWithdrawable', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).withdrawable = withdrawable;
         },
         setDeposits(label: string, deposits: EvmRexDeposit[]) {
-            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, 18))));
+            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, this.getStakingDecimals()))));
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).deposits = deposits;
         },
         setBalance(label: string, balance: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(balance, 18));
+            const num = parseFloat(ethers.utils.formatUnits(balance, this.getStakingDecimals()));
             this.trace('setBalance', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).balance = balance;
         },
         setTotalStaking(label: string, totalStaking: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(totalStaking, 18));
+            const num = parseFloat(ethers.utils.formatUnits(totalStaking, this.getStakingDecimals()));
             this.trace('setTotalStaking', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).totalStaking = totalStaking;
diff --git a/src/antelope/stores/utils/currency-utils.ts b/src/antelope/stores/utils/currency-utils.ts
index 5da419231..5c6998d8e 100644
--- a/src/antelope/stores/utils/currency-utils.ts
+++ b/src/antelope/stores/utils/currency-utils.ts
@@ -2,6 +2,7 @@ import { BigNumber } from 'ethers';
 import { parseUnits } from 'ethers/lib/utils';
 import { formatUnits } from '@ethersproject/units';
 import Decimal from 'decimal.js';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 /**
  * Given a number or string, returns a string representation of the number with up to 18 decimal places
@@ -14,7 +15,7 @@ export function toStringNumber(value: number | string): string {
         return value;
     } else if (typeof value === 'number') {
         const num = new Decimal(value);
-        return num.toFixed(18);
+        return num.toFixed(WEI_PRECISION);
     } else {
         throw new Error('Invalid value type: ' + typeof value);
     }
@@ -309,7 +310,7 @@ export function getFloatReciprocal(float: number | string) {
 
     return new Decimal(1)
         .dividedBy(float)
-        .toFixed(18)
+        .toFixed(WEI_PRECISION)
         .replace(trailingZeroesRegex, '')
         .replace(trailingDotRegex, '');
 }
diff --git a/src/antelope/types/TokenClass.ts b/src/antelope/types/TokenClass.ts
index 7d372a7d0..54f048872 100644
--- a/src/antelope/types/TokenClass.ts
+++ b/src/antelope/types/TokenClass.ts
@@ -1,5 +1,5 @@
 import { ethers } from 'ethers';
-import { formatWei } from 'src/antelope/stores/utils';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
 import { toStringNumber } from 'src/antelope/stores/utils/currency-utils';
 
 export const TOKEN_PRICE_DECIMALS = 18;
@@ -89,7 +89,7 @@ export class TokenPrice {
     }
 
     get decimals(): number {
-        return this.market?.info.decimals || 18;
+        return this.market?.info.decimals || TOKEN_PRICE_DECIMALS;
     }
 
     // Returns the token price as BigNumber
@@ -193,7 +193,7 @@ export class TokenClass implements TokenSourceInfo {
         this.chainId = sourceInfo.chainId;
         this.network = sourceInfo.network;
         this.name = sourceInfo.name;
-        this.decimals = sourceInfo.decimals ?? sourceInfo.precision ?? 18;
+        this.decimals = sourceInfo.decimals ?? sourceInfo.precision ?? WEI_PRECISION;
         this.isSystem = sourceInfo.isSystem;
         this.isNative = sourceInfo.isNative;
         this.logo = sourceInfo.logo ?? sourceInfo.logoURI;
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 972d3e6b9..6d2d5bd62 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
@@ -41,7 +41,7 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value);
+const systemTokenPrice = ref(undefined as BigNumber | undefined);
 const stakedFiatValueBn = computed(() => {
     if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
@@ -51,6 +51,19 @@ const stakedFiatValueBn = computed(() => {
     }
 });
 
+// watch the balances store to update the staked token balance and the system token price
+watch(() => balancesStore.getBalances(label), (balances) => {
+    const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
+    if (stakedTokenBalance) {
+        stakedTokenBalanceBn.value = stakedTokenBalance;
+    }
+    const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
+    if (systemTokenPriceBalance) {
+        systemTokenPrice.value = systemTokenPriceBalance;
+    }
+});
+
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);
@@ -100,7 +113,6 @@ const apyPrittyPrint = computed(() => {
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref($t('evm_stake.unstaking_period'));
 
-// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
 const tvlAmountBn = computed(() => {
     const totalStaking = useRexStore().getRexData(label)?.totalStaking;
     if (totalStaking) {
@@ -111,7 +123,6 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
-// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
 const totalFiatValueBn = computed(() => {
     const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
     const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
diff --git a/src/pages/evm/wallet/SendPage.vue b/src/pages/evm/wallet/SendPage.vue
index e16307a6d..a5456d1c0 100644
--- a/src/pages/evm/wallet/SendPage.vue
+++ b/src/pages/evm/wallet/SendPage.vue
@@ -4,7 +4,7 @@ import AppPage from 'components/evm/AppPage.vue';
 import UserInfo from 'components/evm/UserInfo.vue';
 import { getAntelope, useAccountStore, useChainStore, useUserStore } from 'src/antelope';
 import { TransactionResponse, TokenClass, TokenBalance, NativeCurrencyAddress, AntelopeError } from 'src/antelope/types';
-import { formatWei, prettyPrintBalance, prettyPrintFiatBalance } from 'src/antelope/stores/utils';
+import { WEI_PRECISION, formatWei, prettyPrintBalance, prettyPrintFiatBalance } from 'src/antelope/stores/utils';
 import { BigNumber, ethers } from 'ethers';
 import CurrencyInput from 'components/evm/inputs/CurrencyInput.vue';
 import AddressInput from 'components/evm/inputs/AddressInput.vue';
@@ -103,11 +103,13 @@ export default defineComponent({
         },
         gasFeeInSystemSym() {
             const symbol = chainStore.loggedChain.settings.getSystemToken().symbol;
-            const gas = `${formatWei(this.estimatedGas.system, 18, 18)}`;
+            const decimals = chainStore.loggedChain.settings.getSystemToken().decimals;
+            const gas = `${formatWei(this.estimatedGas.system, decimals, WEI_PRECISION)}`;
             return prettyPrintBalance(gas, userStore.fiatLocale, this.isMobile, symbol);
         },
         gasFeeInFiat() {
-            const gasFiat = `${formatWei(this.estimatedGas.fiat, 18, 18)}`;
+            const decimals = chainStore.loggedChain.settings.getSystemToken().decimals;
+            const gasFiat = `${formatWei(this.estimatedGas.fiat, decimals, WEI_PRECISION)}`;
             return prettyPrintFiatBalance(gasFiat, userStore.fiatLocale, this.isMobile, userStore.fiatCurrency);
         },
         isMobile(): boolean {
@@ -247,7 +249,7 @@ 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, 18)} ${token.symbol}`;
+                        const quantity = `${formatWei(amount, token.decimals, WEI_PRECISION)} ${token.symbol}`;
                         const address = to.substring(0, 6) + '...' + to.substring(to.length - 4, to.length);
                         const dismiss = ant.config.notifyNeutralMessageHandler(
                             this.$t('notification.neutral_message_sending', { quantity, address }),

From 0ebde801fe3f9b1926a1b93922f94d3718dd3c45 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Tue, 29 Aug 2023 17:30:08 -0400
Subject: [PATCH 048/268] fix capitalization

---
 src/i18n/en-us/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index cfa61f30b..57b3676a3 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -202,7 +202,7 @@ export default {
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
         withdrawable_card_label: 'withdrawable',
-        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
+        withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',

From eb1fe14ffe97fadbad3906635c62326cab6a84fd Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 14:07:23 -0300
Subject: [PATCH 049/268] rebasing with source branch

---
 src/antelope/stores/balances.ts             | 23 +++++++++++++++++++++
 src/antelope/stores/chain.ts                |  2 +-
 src/i18n/en-us/index.js                     |  6 ++----
 src/pages/evm/staking/StakingPageHeader.vue | 17 +++++----------
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 844458825..f93fe5794 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -50,6 +50,7 @@ import {
 import { AccountModel, EvmAccountModel } from 'src/antelope/stores/account';
 import { EVMAuthenticator } from 'src/antelope/wallets';
 import { filter } from 'rxjs';
+import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
 
 export interface BalancesState {
     __balances:  { [label: Label]: TokenBalance[] };
@@ -181,6 +182,7 @@ export const useBalancesStore = defineStore(store_name, {
                 const chain_settings = chain.getChain(label).settings as EVMChainSettings;
                 const sysToken = chain_settings.getSystemToken();
                 const wrpToken = chain_settings.getWrappedSystemToken();
+                const stkToken = chain_settings.getStakedSystemToken();
 
                 // get the price for both system and wrapped tokens
                 const price = (await chain_settings.getUsdPrice()).toString();
@@ -188,6 +190,27 @@ export const useBalancesStore = defineStore(store_name, {
                 sysToken.market = new TokenMarketData(marketInfo);
                 wrpToken.market = new TokenMarketData(marketInfo);
 
+                // Now we preview a deposit of 1 SYS to get the ratio
+                const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
+
+                const ratio:BigNumber = await chain.getStakedRatio(label);
+                const ratioNumber = ethers.utils.formatUnits(ratio, stkToken.decimals);
+
+                // only if the ratio is not zero, we update the STK token price
+                if (!ratio.isZero() && !ratio.isNegative()) {
+
+                    // Now we calculate the price of 1 STK = (price of 1 SYS) / ratio
+                    const stkPrice = convertCurrency(oneSys, sysToken.decimals, stkToken.decimals, ratioNumber);
+                    const stkPriceNumber = ethers.utils.formatUnits(stkPrice, sysToken.decimals);
+
+                    // Finally we update the STK token price
+                    const stkMarketInfo = { price:stkPriceNumber } as MarketSourceInfo;
+                    // TODO: this is removed until we decide what to do whith the STK token price
+                    // https://github.com/telosnetwork/telos-wallet/issues/544
+                    // stkToken.market = new TokenMarketData(stkMarketInfo);
+                    this.trace('updateSystemTokensPrices', `STLOS price: ${toRaw(stkMarketInfo)}`);
+                }
+
             } catch (error) {
                 console.error(error);
                 // we won't thorw an error here, as it is not critical
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 349379436..2893b2d03 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -194,7 +194,7 @@ export const useChainStore = defineStore(store_name, {
             // Now we preview a deposit of 1 SYS to get the ratio
             const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
             const stakedRatio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
-            const unstakedRatio:ethers.BigNumber = await contractInstance.previewWithdraw(oneSys);
+            const unstakedRatio:ethers.BigNumber = await contractInstance.previewRedeem(oneSys);
 
             // Finally we update the store
             this.setStakedRatio(label, stakedRatio);
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 57b3676a3..183b1f145 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 6d2d5bd62..97b34369d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -26,16 +26,12 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
-const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
-const stakedRatio = computed(() => chainStore.getStakedRatio(label));
-const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
+const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
+const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
-    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
-        console.log('stakedRatio', stakedRatio.value.toString());
-        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
-        console.log('inverseRatio', inverseRatio.toString());
-        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
-        console.log('ratioNumber', ratioNumber);
+    if (stakedTokenBalanceBn.value && !unstakedRatio.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(unstakedRatio.value, stakedToken.decimals);
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -201,9 +197,6 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
-    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
-    <div>{{ stakedRatio?.toString() }}</div>
-
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From b2e1e7c7982c8956634df802b6a12c56bcca3307 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 01:03:55 -0300
Subject: [PATCH 050/268] avoiding infinite loading

---
 src/pages/evm/staking/StakingPageHeader.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 97b34369d..fa961e52f 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -46,8 +46,6 @@ const stakedFiatValueBn = computed(() => {
         return undefined;
     }
 });
-
-// watch the balances store to update the staked token balance and the system token price
 watch(() => balancesStore.getBalances(label), (balances) => {
     const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
     if (stakedTokenBalance) {

From d7d921d6360cbb6db77d73f797c24e327e4b3c93 Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Fri, 1 Sep 2023 12:17:36 -0500
Subject: [PATCH 051/268] refactor: descriptive var for min bytes, remove
 unused import

---
 src/pages/native/balance/DepositEVM.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/native/balance/DepositEVM.vue b/src/pages/native/balance/DepositEVM.vue
index 6877ab17f..e3752f5c7 100644
--- a/src/pages/native/balance/DepositEVM.vue
+++ b/src/pages/native/balance/DepositEVM.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import BigNumber from 'bignumber.js';
+const MINIMUM_RAM_BYTES = 1000;
 
 export default {
     name: 'WithdrawEVM',
@@ -89,7 +89,7 @@ export default {
         async generateAddress(){
             const accountInfo = await this.$store.$api.getAccount(this.accountName);
 
-            if (accountInfo.ram_quota - accountInfo.ram_usage <= 1000){ // If account (often newly created account) does not have sufficient RAM, notify user
+            if (accountInfo.ram_quota - accountInfo.ram_usage <= MINIMUM_RAM_BYTES){ // If account (often newly created account) does not have sufficient RAM, notify user
                 this.$errorNotification(this.$t('resources.insufficient_ram'));
                 return;
             }

From 1330b47b3a4139493b1c177f91f635ef00ae29fd Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Fri, 1 Sep 2023 12:22:01 -0500
Subject: [PATCH 052/268] refactor: remove unnec async

---
 src/pages/native/balance/DepositEVM.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/native/balance/DepositEVM.vue b/src/pages/native/balance/DepositEVM.vue
index e3752f5c7..766b3e399 100644
--- a/src/pages/native/balance/DepositEVM.vue
+++ b/src/pages/native/balance/DepositEVM.vue
@@ -175,7 +175,7 @@ export default {
         },
     },
     watch: {
-        async showDepositEVMDlg() {
+        showDepositEVMDlg() {
             if (this.showDlg) {
                 this.$emit('addEvmNetwork');
             };

From 757331b43140ffee0a095dc25618ae3b78820a9c Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 28 Aug 2023 22:50:08 -0300
Subject: [PATCH 053/268] notify cancelation changed from error to neutral
 notification

---
 src/pages/demo/SendPageErrors.vue | 6 +++++-
 src/pages/evm/wallet/SendPage.vue | 6 +++++-
 src/pages/evm/wrap/UnwrapTab.vue  | 6 +++++-
 src/pages/evm/wrap/WrapTab.vue    | 6 +++++-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/pages/demo/SendPageErrors.vue b/src/pages/demo/SendPageErrors.vue
index e5af38c5e..21fdf6490 100644
--- a/src/pages/demo/SendPageErrors.vue
+++ b/src/pages/demo/SendPageErrors.vue
@@ -192,7 +192,11 @@ export default defineComponent({
                 console.error(err);
                 if (err instanceof AntelopeError) {
                     const evmErr = err as AntelopeError;
-                    ant.config.notifyFailureMessage(this.$t(evmErr.message), evmErr.payload);
+                    if (evmErr.message === 'antelope.evm.error_transaction_canceled') {
+                        ant.config.notifyNeutralMessageHandler(this.$t(evmErr.message));
+                    } else {
+                        ant.config.notifyFailureMessage(this.$t(evmErr.message), evmErr.payload);
+                    }
                 } else {
                     ant.config.notifyFailureMessage(this.$t('evm_wallet.general_error'));
                 }
diff --git a/src/pages/evm/wallet/SendPage.vue b/src/pages/evm/wallet/SendPage.vue
index e16307a6d..f1e0aba2d 100644
--- a/src/pages/evm/wallet/SendPage.vue
+++ b/src/pages/evm/wallet/SendPage.vue
@@ -269,7 +269,11 @@ export default defineComponent({
                     console.error(err);
                     if (err instanceof AntelopeError) {
                         const evmErr = err as AntelopeError;
-                        ant.config.notifyFailureMessage(this.$t(evmErr.message), evmErr.payload);
+                        if (evmErr.message === 'antelope.evm.error_transaction_canceled') {
+                            ant.config.notifyNeutralMessageHandler(this.$t(evmErr.message));
+                        } else {
+                            ant.config.notifyFailureMessage(this.$t(evmErr.message), evmErr.payload);
+                        }
                     } else {
                         ant.config.notifyFailureMessage(this.$t('evm_wallet.general_error'));
                     }
diff --git a/src/pages/evm/wrap/UnwrapTab.vue b/src/pages/evm/wrap/UnwrapTab.vue
index 3596ff60c..92d552310 100644
--- a/src/pages/evm/wrap/UnwrapTab.vue
+++ b/src/pages/evm/wrap/UnwrapTab.vue
@@ -109,7 +109,11 @@ async function handleUnwrapClick() {
             console.error(err);
             if (err instanceof AntelopeError) {
                 const evmErr = err as AntelopeError;
-                ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
+                if (evmErr.message === 'antelope.evm.error_transaction_canceled') {
+                    ant.config.notifyNeutralMessageHandler($t(evmErr.message));
+                } else {
+                    ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
+                }
             } else {
                 ant.config.notifyFailureMessage($t('evm_wallet.general_error'));
             }
diff --git a/src/pages/evm/wrap/WrapTab.vue b/src/pages/evm/wrap/WrapTab.vue
index 6e242a7f9..0f8b6002e 100644
--- a/src/pages/evm/wrap/WrapTab.vue
+++ b/src/pages/evm/wrap/WrapTab.vue
@@ -125,7 +125,11 @@ async function handleCtaClick() {
             console.error(err);
             if (err instanceof AntelopeError) {
                 const evmErr = err as AntelopeError;
-                ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
+                if (evmErr.message === 'antelope.evm.error_transaction_canceled') {
+                    ant.config.notifyNeutralMessageHandler($t(evmErr.message));
+                } else {
+                    ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
+                }
             } else {
                 ant.config.notifyFailureMessage($t('evm_wallet.general_error'));
             }

From a4a315f2a6ba65f6cc284f0650a3b95e20e13bbf Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 20:24:51 -0300
Subject: [PATCH 054/268] Creating a TransactionError handler to avoid
 repeating code

---
 src/antelope/config/index.ts      | 12 +++++++++++
 src/antelope/stores/balances.ts   | 36 ++++++++++++++++++-------------
 src/boot/antelope.ts              | 15 +++++++++++++
 src/pages/demo/SendPageErrors.vue | 10 ---------
 src/pages/evm/wallet/SendPage.vue | 10 ---------
 src/pages/evm/wrap/UnwrapTab.vue  | 10 ---------
 src/pages/evm/wrap/WrapTab.vue    | 10 ---------
 7 files changed, 48 insertions(+), 55 deletions(-)

diff --git a/src/antelope/config/index.ts b/src/antelope/config/index.ts
index 259819171..d7d5e3d2a 100644
--- a/src/antelope/config/index.ts
+++ b/src/antelope/config/index.ts
@@ -43,6 +43,9 @@ export class AntelopeConfig {
     // localization handler --
     private __localization_handler: (key: string, payload?: Record<string, unknown>) => string = (key: string) => key;
 
+    // transaction error handler --
+    private __transaction_error_handler: (err: AntelopeError, trxFailed: string) => void = () => void 0;
+
     // error to string handler --
     private __error_to_string_handler: (error: unknown) => string = (error: unknown) => {
         try {
@@ -164,6 +167,10 @@ export class AntelopeConfig {
         return this.__localization_handler;
     }
 
+    get transactionErrorHandler() {
+        return this.__transaction_error_handler;
+    }
+
     get errorToStringHandler() {
         return this.__error_to_string_handler;
     }
@@ -228,6 +235,11 @@ export class AntelopeConfig {
         this.__localization_handler = handler;
     }
 
+    // setting transaction error handler --
+    public setTransactionErrorHandler(handler: (err: AntelopeError, trxFailed: string) => void) {
+        this.__transaction_error_handler = handler;
+    }
+
     // setting error to string handler --
     public setErrorToStringHandler(handler: (catched: unknown) => string) {
         this.__error_to_string_handler = handler;
diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 013b8e374..71ea9defb 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -278,10 +278,11 @@ export const useBalancesStore = defineStore(store_name, {
             this.setWagmiSystemTokenTransferConfig(null, label);
         },
         async transferTokens(token: TokenClass, to: string, amount: BigNumber, memo?: string): Promise<TransactionResponse> {
-            this.trace('transferTokens', token, to, amount.toString(), memo);
+            const funcname = 'transferTokens';
+            this.trace(funcname, token, to, amount.toString(), memo);
             const label = 'logged';
             try {
-                useFeedbackStore().setLoading('transferTokens');
+                useFeedbackStore().setLoading(funcname);
                 const chain = useChainStore().loggedChain;
                 if (chain.settings.isNative()) {
                     const chain_settings = chain.settings as NativeChainSettings;
@@ -295,18 +296,20 @@ export const useBalancesStore = defineStore(store_name, {
                         .then(r => this.subscribeForTransactionReceipt(account, r as TransactionResponse));
                 }
             } catch (error) {
-                console.error(error);
-                throw getAntelope().config.wrapError('antelope.evm.error_transfer_failed', error);
+                const trxError = getAntelope().config.wrapError('antelope.evm.error_transfer_failed', error);
+                getAntelope().config.transactionErrorHandler(trxError, funcname);
+                throw trxError;
             } finally {
-                useFeedbackStore().unsetLoading('transferTokens');
+                useFeedbackStore().unsetLoading(funcname);
                 await useBalancesStore().updateBalancesForAccount(label, toRaw(useAccountStore().loggedAccount));
             }
         },
         async wrapSystemTokens(amount: BigNumber): Promise<TransactionResponse> {
-            this.trace('wrapSystemTokens', amount.toString());
+            const funcname = 'wrapSystemTokens';
+            this.trace(funcname, amount.toString());
             const label = 'logged';
             try {
-                useFeedbackStore().setLoading('wrapSystemTokens');
+                useFeedbackStore().setLoading(funcname);
                 const chain = useChainStore().loggedChain;
                 if (chain.settings.isNative()) {
                     console.error('ERROR: wrap not supported on native');
@@ -318,17 +321,19 @@ export const useBalancesStore = defineStore(store_name, {
                         .then(r => this.subscribeForTransactionReceipt(account, r as TransactionResponse));
                 }
             } catch (error) {
-                console.error(error);
-                throw getAntelope().config.wrapError('antelope.evm.error_wrap_failed', error);
+                const trxError = getAntelope().config.wrapError('antelope.evm.error_wrap_failed', error);
+                getAntelope().config.transactionErrorHandler(trxError, funcname);
+                throw trxError;
             } finally {
-                useFeedbackStore().unsetLoading('wrapSystemTokens');
+                useFeedbackStore().unsetLoading(funcname);
             }
         },
         async unwrapSystemTokens(amount: BigNumber): Promise<TransactionResponse> {
-            this.trace('unwrapSystemTokens', amount.toString());
+            const funcname = 'unwrapSystemTokens';
+            this.trace(funcname, amount.toString());
             const label = 'logged';
             try {
-                useFeedbackStore().setLoading('unwrapSystemTokens');
+                useFeedbackStore().setLoading(funcname);
                 const chain = useChainStore().loggedChain;
                 if (chain.settings.isNative()) {
                     console.error('ERROR: unwrap not supported on native');
@@ -340,10 +345,11 @@ export const useBalancesStore = defineStore(store_name, {
                         .then(r => this.subscribeForTransactionReceipt(account, r as TransactionResponse));
                 }
             } catch (error) {
-                console.error(error);
-                throw getAntelope().config.wrapError('antelope.evm.error_unwrap_failed', error);
+                const trxError = getAntelope().config.wrapError('antelope.evm.error_unwrap_failed', error);
+                getAntelope().config.transactionErrorHandler(trxError, funcname);
+                throw trxError;
             } finally {
-                useFeedbackStore().unsetLoading('unwrapSystemTokens');
+                useFeedbackStore().unsetLoading(funcname);
             }
         },
         async transferNativeTokens(
diff --git a/src/boot/antelope.ts b/src/boot/antelope.ts
index 30ce939f3..07204988c 100644
--- a/src/boot/antelope.ts
+++ b/src/boot/antelope.ts
@@ -3,6 +3,7 @@ import { Web3ModalConfig } from '@web3modal/html';
 import { OreIdOptions } from 'oreid-js';
 import { boot } from 'quasar/wrappers';
 import { installAntelope } from 'src/antelope';
+import { AntelopeError } from 'src/antelope/types';
 import {
     MetamaskAuth,
     WalletConnectAuth,
@@ -59,6 +60,20 @@ export default boot(({ app }) => {
     // setting translation handler --
     ant.config.setLocalizationHandler((key:string, payload?: Record<string, unknown>) => app.config.globalProperties.$t(key, payload ? payload : {}));
 
+    // setting transaction error handler --
+    ant.config.setTransactionErrorHandler((err: object) => {
+        if (err instanceof AntelopeError) {
+            const evmErr = err as AntelopeError;
+            if (evmErr.message === 'antelope.evm.error_transaction_canceled') {
+                ant.config.notifyNeutralMessageHandler(ant.config.localizationHandler(evmErr.message));
+            } else {
+                ant.config.notifyFailureMessage(ant.config.localizationHandler(evmErr.message), evmErr.payload);
+            }
+        } else {
+            ant.config.notifyFailureMessage(ant.config.localizationHandler('evm_wallet.general_error'));
+        }
+    });
+
     // set evm authenticators --
     const options: Web3ModalConfig = app.config.globalProperties.$wagmiOptions as Web3ModalConfig;
     const wagmiClient = app.config.globalProperties.$wagmi as EthereumClient;
diff --git a/src/pages/demo/SendPageErrors.vue b/src/pages/demo/SendPageErrors.vue
index 21fdf6490..b5356e9d5 100644
--- a/src/pages/demo/SendPageErrors.vue
+++ b/src/pages/demo/SendPageErrors.vue
@@ -190,16 +190,6 @@ export default defineComponent({
                 }
             }).catch((err) => {
                 console.error(err);
-                if (err instanceof AntelopeError) {
-                    const evmErr = err as AntelopeError;
-                    if (evmErr.message === 'antelope.evm.error_transaction_canceled') {
-                        ant.config.notifyNeutralMessageHandler(this.$t(evmErr.message));
-                    } else {
-                        ant.config.notifyFailureMessage(this.$t(evmErr.message), evmErr.payload);
-                    }
-                } else {
-                    ant.config.notifyFailureMessage(this.$t('evm_wallet.general_error'));
-                }
             });
 
         },
diff --git a/src/pages/evm/wallet/SendPage.vue b/src/pages/evm/wallet/SendPage.vue
index f1e0aba2d..9aae9d0e0 100644
--- a/src/pages/evm/wallet/SendPage.vue
+++ b/src/pages/evm/wallet/SendPage.vue
@@ -267,16 +267,6 @@ export default defineComponent({
                     }
                 }).catch((err) => {
                     console.error(err);
-                    if (err instanceof AntelopeError) {
-                        const evmErr = err as AntelopeError;
-                        if (evmErr.message === 'antelope.evm.error_transaction_canceled') {
-                            ant.config.notifyNeutralMessageHandler(this.$t(evmErr.message));
-                        } else {
-                            ant.config.notifyFailureMessage(this.$t(evmErr.message), evmErr.payload);
-                        }
-                    } else {
-                        ant.config.notifyFailureMessage(this.$t('evm_wallet.general_error'));
-                    }
                 });
             } else {
                 ant.config.notifyFailureMessage(this.$t('evm_wallet.invalid_form'));
diff --git a/src/pages/evm/wrap/UnwrapTab.vue b/src/pages/evm/wrap/UnwrapTab.vue
index 92d552310..ac8e4d1f1 100644
--- a/src/pages/evm/wrap/UnwrapTab.vue
+++ b/src/pages/evm/wrap/UnwrapTab.vue
@@ -107,16 +107,6 @@ async function handleUnwrapClick() {
             });
         } catch (err) {
             console.error(err);
-            if (err instanceof AntelopeError) {
-                const evmErr = err as AntelopeError;
-                if (evmErr.message === 'antelope.evm.error_transaction_canceled') {
-                    ant.config.notifyNeutralMessageHandler($t(evmErr.message));
-                } else {
-                    ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
-                }
-            } else {
-                ant.config.notifyFailureMessage($t('evm_wallet.general_error'));
-            }
         }
     }
 }
diff --git a/src/pages/evm/wrap/WrapTab.vue b/src/pages/evm/wrap/WrapTab.vue
index 0f8b6002e..3680889ef 100644
--- a/src/pages/evm/wrap/WrapTab.vue
+++ b/src/pages/evm/wrap/WrapTab.vue
@@ -123,16 +123,6 @@ async function handleCtaClick() {
             });
         } catch (err) {
             console.error(err);
-            if (err instanceof AntelopeError) {
-                const evmErr = err as AntelopeError;
-                if (evmErr.message === 'antelope.evm.error_transaction_canceled') {
-                    ant.config.notifyNeutralMessageHandler($t(evmErr.message));
-                } else {
-                    ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
-                }
-            } else {
-                ant.config.notifyFailureMessage($t('evm_wallet.general_error'));
-            }
         }
     }
 }

From b6c18103dc4d85f52706544a975842fde3359062 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 19:38:17 -0300
Subject: [PATCH 055/268] save WIP - staking tab

---
 src/antelope/stores/balances.ts             |   7 +
 src/antelope/stores/rex.ts                  |  20 +-
 src/components/ConversionRateBadge.vue      |   7 +-
 src/components/evm/inputs/CurrencyInput.vue |  14 +-
 src/i18n/en-us/index.js                     |   9 +
 src/pages/evm/staking/StakingPage.vue       |   3 +-
 src/pages/evm/staking/StakingPageHeader.vue |  61 ++++-
 src/pages/evm/staking/StakingTab.vue        | 264 ++++++++++++++++++++
 src/pages/evm/wrap/UnwrapTab.vue            |   1 +
 src/pages/evm/wrap/WrapTab.vue              |   1 +
 10 files changed, 369 insertions(+), 18 deletions(-)
 create mode 100644 src/pages/evm/staking/StakingTab.vue

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index f93fe5794..080c04c76 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -86,6 +86,13 @@ export const useBalancesStore = defineStore(store_name, {
                 await useBalancesStore().updateBalancesForAccount('current', useAccountStore().loggedAccount);
             }, 10000);
         },
+        async updateBalances(label: string) {
+            this.trace('updateBalances', label);
+            const account = useAccountStore().getAccount(label);
+            if (account) {
+                await this.updateBalancesForAccount(label, account);
+            }
+        },
         async updateBalancesForAccount(label: string, account: AccountModel | null) {
             this.trace('updateBalancesForAccount', label, account);
             try {
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index f154ed6fd..aec707c1e 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -13,7 +13,7 @@ import {
     createTraceFunction,
     useFeedbackStore,
 } from 'src/antelope/stores/feedback';
-import { AntelopeError, Label } from 'src/antelope/types';
+import { AntelopeError, Label, TransactionResponse } from 'src/antelope/types';
 import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
 import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
@@ -118,6 +118,13 @@ export const useRexStore = defineStore(store_name, {
             const totalStaking = await contract.totalAssets();
             this.setTotalStaking(label, totalStaking);
         },
+        async updateRexData(label: string) {
+            this.trace('updateRexData', label);
+            const account = useAccountStore().getAccount(label);
+            if (account) {
+                await this.updateRexDataForAccount(label, account);
+            }
+        },
         /**
          * This method shopuld be called to quiery the REX data for a given account,
          * along with the current stato of the total staked tokens on the system.
@@ -176,9 +183,20 @@ export const useRexStore = defineStore(store_name, {
             const balance = await contract.balanceOf(address);
             this.setBalance(label, balance);
         },
+        /**
+         * utility method to get the number of decimals for the staked system token
+         * @returns the number of decimals for the staked system token
+         */
         getStakingDecimals() {
             return useChainStore().currentEvmChain?.settings.getStakedSystemToken().decimals || WEI_PRECISION;
         },
+        // transactions ----------
+        async stakeSystemTokens(label: string, amount: ethers.BigNumber): Promise<TransactionResponse> {
+            // TODO: implement
+            console.error('stakeSystemTokens not implemented yet');
+            this.trace('stakeSystemTokens', label, amount);
+            return {} as TransactionResponse;
+        },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
             const num = parseFloat(ethers.utils.formatUnits(withdrawable, this.getStakingDecimals()));
diff --git a/src/components/ConversionRateBadge.vue b/src/components/ConversionRateBadge.vue
index 4b35ef743..b74f4fc75 100644
--- a/src/components/ConversionRateBadge.vue
+++ b/src/components/ConversionRateBadge.vue
@@ -11,17 +11,20 @@ const props = defineProps<{
     tokenTwoSymbol: string;
     tokenTwoAmount: BigNumber; // the amount of token two in a single token one
     tokenTwoDecimals: number; // the number of decimals in token two, e.g. 18 for ETH
+    decimals: number; // abbreviate should be false in order to display decimals
 }>();
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
 
 const label = computed(() => {
+    console.log('label computed: ', props.tokenOneSymbol, props.tokenTwoSymbol, props.tokenTwoAmount.toString(), fiatLocale.value, props.tokenTwoDecimals);
+    const abbreviate = props.decimals === 0;
     const prettyTokenTwoAmount = prettyPrintCurrency(
         props.tokenTwoAmount,
-        4,
+        props.decimals ?? 2,
         fiatLocale.value,
-        true,
+        abbreviate,
         props.tokenTwoSymbol,
         false,
         props.tokenTwoDecimals,
diff --git a/src/components/evm/inputs/CurrencyInput.vue b/src/components/evm/inputs/CurrencyInput.vue
index 793c57f81..bb8e82b80 100644
--- a/src/components/evm/inputs/CurrencyInput.vue
+++ b/src/components/evm/inputs/CurrencyInput.vue
@@ -328,12 +328,12 @@ export default defineComponent({
         },
 
         primaryCurrencyDisplayPrecision() {
-            // if the value represents fiat, show 2 decimals; else show 4
-            return this.decimals === 2 ? 2 : 4;
+            // if the value represents fiat, show 2 decimals; else show this.decimalsToDisplay
+            return this.decimals === 2 ? 2 : this.decimalsToDisplay;
         },
         secondaryCurrencyDisplayPrecision() {
-            // if the value represents fiat, show 2 decimals; else show 4
-            return this.secondaryCurrencyDecimals === 2 ? 2 : 4;
+            // if the value represents fiat, show 2 decimals; else show this.decimalsToDisplay
+            return this.secondaryCurrencyDecimals === 2 ? 2 : this.decimalsToDisplay;
         },
         leadingZeroesRegex(): RegExp {
             const leadingZeroesPattern = `^0+(?!$|\\${this.decimalSeparator})`;
@@ -427,7 +427,7 @@ export default defineComponent({
                             true,
                         );
                     } else {
-                        const decimalsToShow = formatUnits(newValue, this.decimals).split('.')[1].length;
+                        const decimalsToShow = this.decimalsToDisplay;
                         newInputValue = prettyPrintCurrency(
                             newValue,
                             decimalsToShow,
@@ -937,9 +937,9 @@ export default defineComponent({
 
 <template>
 <div
-    :id="$attrs.id"
+    :id="($attrs.id as string)"
     :class="{
-        [$attrs.class]: !!$attrs.class,
+        [$attrs.class as string]: !!$attrs.class,
         'c-currency-input': true,
         'c-currency-input--error': !!visibleErrorText,
         'c-currency-input--readonly': !!inputElementAttrs.readonly,
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 183b1f145..ddc8a20f3 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -219,6 +219,15 @@ export default {
         tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
+        stake_input_label: 'Staking Amount',
+        stake: 'Stake',
+        stake_button_label: 'Stake {systemSymbol} to {stakedSymbol}',
+        stake_sidebar_title: 'Why stake {symbol}?',
+        stake_sidebar_content_fragment_1: 'Staking your TLOS to sTLOS grants you access to',
+        stake_sidebar_content_fragment_2_bold: ' continuous rewards ',
+        stake_sidebar_content_fragment_3: 'and various DeFi applications, further increasing yield. As the reward pool increases, the TLOS to sTLOS conversion rate will change over time. Therefore, the amount of sTLOS received is smaller than the staked TLOS.',
+        stake_sidebar_content_fragment_4_bold: ' Rewards will be auto-compounded. ',
+        stake_sidebar_content_fragment_5: 'No further action is required.',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index e5ac5b327..374dd8eef 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AppPage from 'components/evm/AppPage.vue';
 import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
+import StakingTab from 'pages/evm/staking/StakingTab.vue';
 
 const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
@@ -12,7 +13,7 @@ const tabs = ['stake', 'unstake', 'withdraw'];
     </template>
 
     <template v-slot:stake>
-        <p>stake tab</p>
+        <StakingTab />
     </template>
 
     <template v-slot:unstake>
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 97b34369d..2a917bba3 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -10,6 +10,10 @@ import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
 
 import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
 
 const label = 'current';
 const { t: $t } = useI18n();
@@ -26,7 +30,6 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
-const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
@@ -37,7 +40,6 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = ref(undefined as BigNumber | undefined);
 const stakedFiatValueBn = computed(() => {
     if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
@@ -46,20 +48,27 @@ const stakedFiatValueBn = computed(() => {
         return undefined;
     }
 });
-
-// watch the balances store to update the staked token balance and the system token price
-watch(() => balancesStore.getBalances(label), (balances) => {
+const stakedTokenBalanceBn = computed(() => {
+    const balances = balancesStore.getBalances(label);
     const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
     if (stakedTokenBalance) {
-        stakedTokenBalanceBn.value = stakedTokenBalance;
+        return stakedTokenBalance;
+    } else {
+        return undefined;
     }
+});
+const systemTokenPrice = computed(() => {
+    const balances = balancesStore.getBalances(label);
     const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
     if (systemTokenPriceBalance) {
-        systemTokenPrice.value = systemTokenPriceBalance;
+        return systemTokenPriceBalance;
+    } else {
+        return undefined;
     }
 });
 
 
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);
@@ -173,6 +182,44 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
+// creatmos un interval que cada 5 segundos verifique si cada uno de los loadings es true o false.
+// por cada loading que encontremos en true, debemos llamar a actualizar las dependendicas de ese loading
+// si todos los loadings son false, entonces podemos parar el intervalo
+
+const intervalTimer = setInterval(() => {
+
+    // is staking still loading?
+    if (isStakedLoading.value) {
+        // if staked balance is still undefined we force the balances update
+        if (stakedTokenBalanceBn.value === undefined) {
+            balancesStore.updateBalances(label);
+        }
+        // if unstaked ratio is still zero we force the chain update
+        if (unstakedRatio.value.isZero()) {
+            chainStore.updateStakedRatio(label);
+        }
+    }
+    // is unstaking still loading?
+    if (isUnstakingLoading.value || isWithdrawableLoading.value) {
+        // we need to update rex data
+        useRexStore().updateRexData(label);
+    }
+    if (apyisLoading.value) {
+        // force apy update
+        chainStore.updateApy(label);
+    }
+
+    if (
+        // we are not in the staking page or...
+        route.path !== '/evm/staking' ||
+        // all loadings are false at the same time
+        (!isStakedLoading.value && !isUnstakingLoading.value && !isWithdrawableLoading.value && !apyisLoading.value)
+    ) {
+        clearInterval(intervalTimer);
+    } else {
+    }
+}, 5000);
+
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
     let decimals = symbol === fiatCurrency.value ? 2 : 4;
     if (!amount || amount.isZero()) {
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
new file mode 100644
index 000000000..c37bce9e0
--- /dev/null
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ethers } from 'ethers';
+
+import {
+    getAntelope,
+    useAccountStore,
+    useBalancesStore,
+    useChainStore,
+    useRexStore,
+    useUserStore,
+} from 'src/antelope';
+
+import EVMSidebarPage from 'src/layouts/EVMSidebarPage.vue';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
+import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { AntelopeError } from 'src/antelope/types';
+
+const label = 'current';
+
+const { t: $t } = useI18n();
+const uiDecimals = 2;
+const ant = getAntelope();
+const chainStore = useChainStore();
+const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
+const userStore = useUserStore();
+const balanceStore = useBalancesStore();
+const accountStore = useAccountStore();
+
+const systemToken = chainSettings.getSystemToken();
+const systemTokenSymbol = systemToken.symbol;
+const systemTokenDecimals = systemToken.decimals;
+const stakedToken = chainSettings.getStakedSystemToken();
+const stakedTokenSymbol = stakedToken.symbol;
+const stakedTokenDecimals = stakedToken.decimals;
+
+
+// data
+const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
+const inputModelValue = ref(ethers.constants.Zero);
+const estimatedGas = ref(ethers.constants.Zero);
+const stakedRatio = computed(() => {
+    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
+    return chainStore.getStakedRatio(label);
+});
+const outputModelValue = computed(() => {
+    if (stakedRatio.value.isZero()) {
+        return ethers.constants.Zero;
+    }
+    const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
+    console.log('outputModelValue computed: ', output.toString());
+    return output;
+});
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
+    balance => balance.token.contract === systemToken.address)[0],
+);
+const systemTokenFiatPrice = computed(() => systemTokenBalanceInfo.value?.token.price.getAmountInFiatStr(1) ?? '1');
+const systemTokenBalance = computed(() => systemTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
+const sidebarContent = computed(() => {
+    const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
+    const content = [{
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_1',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_2_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_3',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_4_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_5',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }];
+
+    return {
+        header,
+        content,
+    };
+});
+const availableTostake = computed(() => {
+    const available = systemTokenBalance.value.sub(estimatedGas.value);
+
+    if (available.lt(0)) {
+        return ethers.constants.Zero;
+    }
+    return available;
+});
+const formIsValid = computed(() =>
+    !inputModelValue.value.isZero() &&
+    inputModelValue.value.lt(availableTostake.value),
+);
+const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeSystemTokens'));
+
+
+// methods
+onBeforeMount(() => {
+    // https://github.com/telosnetwork/telos-wallet/issues/274
+    const GAS_FOR_stakePING_TOKEN = 55500;
+    chainSettings.getEstimatedGas(GAS_FOR_stakePING_TOKEN).then((gas) => {
+        estimatedGas.value = gas.system;
+    });
+});
+
+async function handleCtaClick() {
+    const label = 'logged';
+    if (!await accountStore.isConnectedToCorrectNetwork(label)) {
+        const networkName = useChainStore().loggedChain.settings.getDisplay();
+        const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
+
+        ant.config.notifyFailureWithAction(errorMessage, {
+            label: ant.config.localizationHandler('evm_wallet.switch'),
+        });
+
+        return;
+    }
+
+    if (formIsValid.value) {
+        try {
+            const tx = await useRexStore().stakeSystemTokens(label, inputModelValue.value);
+            const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
+
+            const dismiss = ant.config.notifyNeutralMessageHandler(
+                $t('notification.neutral_message_stakeping', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+            );
+
+            tx.wait().then(() => {
+                ant.config.notifySuccessfulTrxHandler(
+                    `${chainSettings.getExplorerUrl()}/tx/${tx.hash}`,
+                );
+            }).catch((err) => {
+                console.error(err);
+            }).finally(() => {
+                dismiss();
+            });
+        } catch (err) {
+            console.error(err);
+            if (err instanceof AntelopeError) {
+                const evmErr = err as AntelopeError;
+                ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
+            } else {
+                ant.config.notifyFailureMessage($t('evm_wallet.general_error'));
+            }
+        }
+    }
+}
+</script>
+
+<template>
+<EVMSidebarPage :sidebar-content="sidebarContent">
+
+    <!-- convert ratio 1:stakedRatio -->
+    <div class="row q-mb-xl">
+        <div class="col-12">
+            <div class="c-stake-tab__badge-container">
+                <ConversionRateBadge
+                    :token-one-symbol="systemTokenSymbol"
+                    :token-two-symbol="stakedTokenSymbol"
+                    :token-two-decimals="systemTokenDecimals"
+                    :token-two-amount="stakedRatio"
+                    :decimals="uiDecimals"
+                />
+            </div>
+        </div>
+    </div>
+
+    <!-- TLOS input -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="inputModelValue"
+                :symbol="systemTokenSymbol"
+                :decimals="systemTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :secondary-currency-code="fiatCurrency"
+                :secondary-currency-decimals="2"
+                :secondary-currency-conversion-factor="systemTokenFiatPrice"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                :max-value="availableTostake"
+                class="c-stake-tab__input"
+            />
+        </div>
+    </div>
+
+    <!-- arrow -->
+    <div class="row q-mb-sm">
+        <div class="col-12 text-center">
+            <img
+                src="~assets/icon--arrow-down.svg"
+                :alt="$t('global.arrow_icon_alt')"
+                height="20"
+                width="18"
+            >
+        </div>
+    </div>
+
+    <!-- output field (readonly) -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="outputModelValue"
+                :symbol="stakedTokenSymbol"
+                :decimals="stakedTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                class="c-stake-tab__input"
+                readonly="readonly"
+            />
+        </div>
+    </div>
+
+    <!-- stake button -->
+    <div class="row">
+        <div class="col-12">
+            <div class="c-stake-tab__cta-container">
+                <q-btn
+                    color="primary"
+                    :disable="!formIsValid"
+                    :loading="ctaIsLoading"
+                    :label="$t('evm_stake.stake')"
+                    :aria-label="$t(
+                        'evm_stake.stake_button_label',
+                        { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+                    )"
+                    @click="handleCtaClick"
+                />
+            </div>
+        </div>
+    </div>
+</EVMSidebarPage>
+</template>
+
+<style lang="scss">
+.c-stake-tab {
+    &__badge-container,
+    &__cta-container,
+    &__input {
+        max-width: 320px;
+        margin: auto;
+    }
+
+    &__badge-container,
+    &__cta-container {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+</style>
diff --git a/src/pages/evm/wrap/UnwrapTab.vue b/src/pages/evm/wrap/UnwrapTab.vue
index 3596ff60c..13351a945 100644
--- a/src/pages/evm/wrap/UnwrapTab.vue
+++ b/src/pages/evm/wrap/UnwrapTab.vue
@@ -130,6 +130,7 @@ async function handleUnwrapClick() {
                     :token-two-symbol="systemTokenSymbol"
                     :token-two-decimals="systemTokenDecimals"
                     :token-two-amount="oneEth"
+                    :decimals="0"
                 />
             </div>
         </div>
diff --git a/src/pages/evm/wrap/WrapTab.vue b/src/pages/evm/wrap/WrapTab.vue
index 6e242a7f9..114046197 100644
--- a/src/pages/evm/wrap/WrapTab.vue
+++ b/src/pages/evm/wrap/WrapTab.vue
@@ -146,6 +146,7 @@ async function handleCtaClick() {
                     :token-two-symbol="systemTokenSymbol"
                     :token-two-decimals="systemTokenDecimals"
                     :token-two-amount="oneEth"
+                    :decimals="0"
                 />
             </div>
         </div>

From 59f4bf4614b700d1dce219b5064824b682ea50d8 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 16:00:26 -0300
Subject: [PATCH 056/268] WIP

---
 src/components/evm/AppNav.vue               |   1 -
 src/i18n/en-us/index.js                     |   7 +
 src/pages/evm/staking/StakingPage.vue       |  22 ++-
 src/pages/evm/staking/StakingPageHeader.vue | 149 ++++++++++++++++++++
 src/router/routes.js                        |  10 +-
 5 files changed, 169 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/evm/staking/StakingPageHeader.vue

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 479ff74ce..a8b47a003 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -261,7 +261,6 @@ export default defineComponent({
             </li>
 
             <li
-                v-if="false"
                 class="c-app-nav__menu-item"
                 role="menuitem"
                 :tabindex="menuItemTabIndex"
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 338de764f..057f973d3 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -189,6 +189,13 @@ export default {
         wrap_input_label: 'Wrapping Amount',
         unwrap_input_label: 'Unwrapping Amount',
     },
+    evm_stake: {
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        staked_card_label: 'Staked {symbol}',
+        staked_card_tooltip: 'Staked\n\n' +
+        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_tooltip: 'Unstaking',
+    },
     notification:{
         success_title_trx: 'Success',
         success_title_copied: 'Copied',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index c7e321c75..e5ac5b327 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -1,24 +1,14 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script setup lang="ts">
 import AppPage from 'components/evm/AppPage.vue';
+import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
 
-export default defineComponent({
-    name: 'StakingPage',
-    components: {
-        AppPage,
-    },
-    data: () => ({
-        tabs: ['stake', 'unstake', 'withdraw'],
-    }),
-
-});
+const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
 
 <template>
 <AppPage :tabs="tabs">
     <template v-slot:header>
-        <p>stake page header stuff</p>
+        <StakingPageHeader />
     </template>
 
     <template v-slot:stake>
@@ -38,3 +28,7 @@ export default defineComponent({
 <style lang="scss">
 
 </style>
+
+
+
+
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
new file mode 100644
index 000000000..3beaa0d97
--- /dev/null
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BigNumber, ethers } from 'ethers';
+
+import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
+import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { NativeCurrencyAddress } from 'src/antelope/types';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+
+import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
+
+
+const { t: $t } = useI18n();
+const userStore = useUserStore();
+const balancesStore = useBalancesStore();
+const chainStore = useChainStore();
+const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
+// data
+const systemTokenPrice = ref(0); // always equal to wrapped token price
+const loading = ref(true);
+
+
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenName = computed(() => chainSettings.getSystemToken().name);
+const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
+const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
+
+const totalFiatValueText = ref('--');
+
+/*
+const totalFiatValueText = computed(() => {
+    if (loading.value) {
+        return '--';
+    }
+
+    const totalBalance = +totalSystemAndWrappedBalance.value;
+    const totalFiatValue = totalBalance * systemTokenPrice.value;
+
+    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
+});
+
+
+const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
+const allBalances = computed(() => balancesStore.loggedBalances);
+const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
+const wrappedTokenBalanceBn = computed(() =>
+    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
+);
+const totalSystemAndWrappedBalance = computed(() => {
+    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
+        return '0';
+    }
+    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
+
+    return formatWei(addedBn, WEI_PRECISION);
+});
+const totalBalanceUnitsText = computed(() => {
+    const systemSymbol = chainSettings.getSystemToken().symbol;
+    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+
+    return `${systemSymbol} + ${wrappedSymbol}`;
+});
+const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const wrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
+*/
+
+const stakedFiatValueText = ref('--');
+const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
+const unstakingFiatValueText = ref('--');
+const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
+
+const cardData = computed(() => [{
+    label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    primaryText: stakedFiatValueText.value,
+    secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}]);
+
+
+// methods
+onBeforeMount(() => {
+    chainSettings.getUsdPrice().then((price) => {
+        systemTokenPrice.value = price;
+    }).finally(() => {
+        loading.value = false;
+    });
+});
+
+function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
+    return prettyPrintCurrency(
+        amount ?? BigNumber.from(0),
+        4,
+        fiatLocale.value,
+        false,
+        symbol,
+        false,
+        WEI_PRECISION,
+    );
+}
+</script>
+
+<template>
+<div class="c-staking-header">
+    <div class="text-center q-mb-xl">
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemTokenName }) }}</h5>
+        <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
+    </div>
+
+    <ScrollableInfoCards :cards="cardData" />
+</div>
+</template>
+
+<style lang="scss">
+.c-staking-header {
+    width: 100%;
+}
+</style>
diff --git a/src/router/routes.js b/src/router/routes.js
index 4d99cdc2c..2c700f75b 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -72,11 +72,11 @@ const routes = [
                 },
                 component: () => import('pages/evm/nfts/NftDetailsPage.vue'),
             },
-            // {
-            //     path: 'staking',
-            //     name: 'evm-staking',
-            //     component: () => import('pages/evm/staking/StakingPage.vue'),
-            // },
+            {
+                path: 'staking',
+                name: 'evm-staking',
+                component: () => import('pages/evm/staking/StakingPage.vue'),
+            },
             {
                 path: 'wrap',
                 name: 'evm-wrap',

From c6dbb9509b7b76645d5e7f2d391f2f83a6fba14e Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 057/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue               |  10 ++
 src/components/evm/ScrollableInfoCards.vue  |  14 ++-
 src/i18n/en-us/index.js                     |  31 +++++-
 src/pages/evm/staking/StakingPageHeader.vue | 111 +++++++++-----------
 4 files changed, 98 insertions(+), 68 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index a8b47a003..2be56ab14 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,6 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
+                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
             </li>
 
             <li
@@ -481,6 +482,15 @@ export default defineComponent({
         }
     }
 
+    &__apy-box {
+        @include text--small;
+        background-color: rgba(255, 255, 255, 0.1);
+        color: var(--bg-color);
+        padding: 4px 8px;
+        border-radius: 4px;
+        display: inline-block;
+    }
+
     &__icon {
         // svg color overrides
         &--current-route:not(#{$this}__icon--acorn) path {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 591334a9a..1b10f0552 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -8,13 +8,21 @@ const props = defineProps<{
         primaryText?: string;
         secondaryText?: string;
         lowContrastSecondaryText?: boolean;
+        useSmallBox?: boolean;
     }[];
 }>();
 </script>
 
 <template>
 <div class="c-scrollable-info-cards">
-    <div v-for="(card, index) in cards" :key="`card-${index}`" class="c-scrollable-info-cards__card">
+    <div
+        v-for="(card, index) in cards"
+        :key="`card-${index}`"
+        :class="{
+            'c-scrollable-info-cards__card': true,
+            'c-scrollable-info-cards__card--small': !!card.useSmallBox,
+        }"
+    >
         <div class="c-scrollable-info-cards__card-header">
             <h5 class="u-text--low-contrast">
                 {{ card.label }}
@@ -66,9 +74,11 @@ const props = defineProps<{
         border: 2px solid var(--header-item-outline-color);
         width: 220px;
         flex-shrink: 0;
-
         @include sm-and-up {
             width: 300px;
+            &--small {
+                width: 220px;
+            }
         }
     }
 
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 057f973d3..3de2c9501 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -192,9 +192,34 @@ export default {
     evm_stake: {
         total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
         staked_card_label: 'Staked {symbol}',
-        staked_card_tooltip: 'Staked\n\n' +
-        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
-        unstaking_card_tooltip: 'Unstaking',
+        staked_card_tooltip: 'Staked tokens:\n\n' +
+        'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
+        'This includes your {stakedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_label: 'Unstaking',
+        unstaking_card_tooltip: 'Unstaking tokens:\n\n' +
+        'This reflects the total value of locked {systemSymbol} in the process of unstaking.\n' +
+        'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
+        'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
+        'During this time you cannot interact with this {systemSymbol}.',
+        withdrawable_card_label: 'Withdraw-able',
+        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
+        'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
+        'you can withdraw your {systemSymbol} from escrow.',
+        apy_card_label: 'APY',
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
+        'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
+        'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
+        'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
+        unstaking_period_card_label: 'Unstaking Period',
+        unstaking_period_card_tooltip: 'Unstaking Period:\n\n' +
+        'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
+        'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
+        tvl_card_label: 'TVL',
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 3beaa0d97..52b4b682d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -29,83 +29,63 @@ const systemTokenName = computed(() => chainSettings.getSystemToken().name);
 const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
 const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
 
-const totalFiatValueText = ref('--');
+const totalFiatValueText = ref('$ 4,324.35');
 
-/*
-const totalFiatValueText = computed(() => {
-    if (loading.value) {
-        return '--';
-    }
-
-    const totalBalance = +totalSystemAndWrappedBalance.value;
-    const totalFiatValue = totalBalance * systemTokenPrice.value;
-
-    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
-});
+const stakedFiatValueText = ref('$ 4,000.23');
+const stakedTokenBalanceBn = ref(ethers.utils.parseUnits('34021.230', WEI_PRECISION));
+const unstakingFiatValueText = ref('$ 200.72');
+const unstakingBalanceBn = ref(ethers.utils.parseUnits('1242.0312', WEI_PRECISION));
+const withdrawableFiatValueText = ref('$ 123.02');
+const withdrawableBalanceBn = ref(ethers.utils.parseUnits('245.0225', WEI_PRECISION));
 
+const apyPrittyPrint = ref('8.23%');
+const unlockPeriod = ref('10 days');
 
-const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
-const allBalances = computed(() => balancesStore.loggedBalances);
-const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
-const wrappedTokenBalanceBn = computed(() =>
-    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
-);
-const totalSystemAndWrappedBalance = computed(() => {
-    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
-        return '0';
-    }
-    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
-
-    return formatWei(addedBn, WEI_PRECISION);
-});
-const totalBalanceUnitsText = computed(() => {
-    const systemSymbol = chainSettings.getSystemToken().symbol;
-    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
+const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
+const evmNetworkName = ref('Telos EVM');
 
-    return `${systemSymbol} + ${wrappedSymbol}`;
-});
-const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const wrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
-*/
-
-const stakedFiatValueText = ref('--');
-const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
-const unstakingFiatValueText = ref('--');
-const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
-
-const cardData = computed(() => [{
+const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
     tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
     primaryText: stakedFiatValueText.value,
     secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    label: $t('evm_stake.unstaking_card_label'),
+    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
     primaryText: unstakingFiatValueText.value,
     secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
-    primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    label: $t('evm_stake.withdrawable_card_label'),
+    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    primaryText: withdrawableFiatValueText.value,
+    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
+}]);
+
+const secondLineData = computed(() => [{
+    label: $t('evm_stake.apy_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: apyPrittyPrint.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.unstaking_period_card_label'),
+    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: unlockPeriod.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.tvl_card_label'),
+    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: prettyPrintToken(tvlAmountBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
 }]);
 
 
@@ -138,12 +118,17 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 
-    <ScrollableInfoCards :cards="cardData" />
+    <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
+    <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>
 </template>
 
 <style lang="scss">
 .c-staking-header {
     width: 100%;
+
+    &__cards-second-line {
+        margin-top: 24px;
+    }
 }
 </style>

From c659e1489667349ea80e07947adaec37736fad94 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 058/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3de2c9501..d20cab566 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 5a5f8556708d52158a0daafa4fc97c5578a0e5ab Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:10:04 -0400
Subject: [PATCH 059/268] use i18n for apy label

---
 src/components/evm/AppNav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 2be56ab14..9fb48b9c9 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,7 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
+                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
             </li>
 
             <li

From f1c01ae9609631475dbed51f0f63c0c1383f43b7 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 060/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index d20cab566..3de2c9501 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From b02eeedb4ad3e1bd8dc3d3a73fffd70c78e0e1bc Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 061/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3de2c9501..d20cab566 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From b10e3b6338b1fd4de00fe4cb44be043ca42495a2 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 1 Sep 2023 19:09:22 -0400
Subject: [PATCH 062/268] fix a bunch of issues

---
 src/antelope/chains/EVMChainSettings.ts       |   4 +
 src/antelope/stores/contract.ts               |   2 +-
 src/antelope/stores/history.ts                |  72 ++++++-------
 src/antelope/stores/nfts.ts                   |   5 +-
 src/antelope/types/EvmTransaction.ts          |   2 +
 src/antelope/types/NFTClass.ts                |   4 +
 src/pages/evm/nfts/NftInventoryPage.vue       |   1 -
 src/pages/evm/wallet/WalletTransactionRow.vue | 101 +++++++++---------
 .../evm/wallet/WalletTransactionsTab.vue      |  20 ++--
 9 files changed, 107 insertions(+), 104 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index fa61ebf03..5c004c07e 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -329,6 +329,10 @@ export default abstract class EVMChainSettings implements ChainSettings {
 
                     }
                     const contract_source = response.contracts[item_source.contract];
+                    // eztodo temporary
+                    if (!contract_source) {
+                        continue;
+                    }
                     const contract = new NFTContractClass(contract_source);
                     const item = new NFTItemClass(item_source, contract);
                     const nft = new NFTClass(item);
diff --git a/src/antelope/stores/contract.ts b/src/antelope/stores/contract.ts
index 22875ee0d..9758149ab 100644
--- a/src/antelope/stores/contract.ts
+++ b/src/antelope/stores/contract.ts
@@ -62,7 +62,7 @@ export const useContractStore = defineStore(store_name, {
                 let contract = { address: address };
                 try {
                     const indexer = (useChainStore().loggedChain.settings as EVMChainSettings).getIndexer();
-                    const response = await indexer.get(`/contract/${address}?full=true&includeAbi=true`);
+                    const response = await indexer.get(`/v1/contract/${address}?full=true&includeAbi=true`);
                     if (response.data?.success && response.data.results.length > 0){
                         contract = response.data.results[0];
                     }
diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 1df62b756..4b9edaf0f 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -107,7 +107,6 @@ export const useHistoryStore = defineStore(store_name, {
 
             try {
                 // eztodo where to debounce?
-                // eztodo erc1155 are not returned by indexer for nft detail page
                 // for NFTs (ERC1155 and ERC721), we need to fetch information from the transfers endpoint,
                 // which returns data required for the UI
                 if (!this.__evm_transfers[label].transfers.length) {
@@ -135,23 +134,23 @@ export const useHistoryStore = defineStore(store_name, {
                 });
 
                 this.setEVMTransactions(label, transactions);
-                // we do the shaping of transactions in background to speed up the UI
 
                 await this.shapeTransactions(label, transactions);
 
                 // there's an instant between this point and the appearance of the first transaction to show
                 // so we add a small delay to avoid flickering
+                // eztodo verify this is necessary
                 setTimeout(() => {
                     feedbackStore.unsetLoading('history.fetchEVMTransactionsForAccount');
                 }, 500);
             } catch (error) {
                 feedbackStore.unsetLoading('history.fetchEVMTransactionsForAccount');
+                console.error(error);
                 throw new AntelopeError('antelope.history.error_fetching_transactions');
             }
         },
 
         // fetch all NFT transfers for an account (erc721, erc155)
-        // eztodo pass in token type?
         async fetchEvmNftTransfersForAccount(label: Label, account: string): Promise<void> {
             // eztodo verify account
             const feedbackStore = useFeedbackStore();
@@ -232,10 +231,10 @@ export const useHistoryStore = defineStore(store_name, {
             const allNftTransfers = this.__evm_transfers[label].transfers;
 
             const transactionShapePromises = transactions.map(async (tx) => {
-                const index = transactions.findIndex(t => t.hash === tx.hash);
-
                 const erc20Transfers = await contractStore.getErc20TransfersFromTransaction(tx);
-                const userAddressLower = this.__evm_filter.address.toLowerCase();
+                // const userAddressLower = this.__evm_filter.address.toLowerCase();
+                // eztodo revert
+                const userAddressLower = '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607'.toLowerCase();
 
                 const gasUsedInTlosBn = BigNumber.from(tx.gasPrice).mul(tx.gasused);
                 const gasUsedInTlos = getGasInTlos(tx.gasused, tx.gasPrice);
@@ -266,9 +265,10 @@ export const useHistoryStore = defineStore(store_name, {
 
                 let actionName = '';
 
+                // eztodo replace instances of +tx.value
                 if (!isFailed) {
                     if (+tx.value) {
-                        // eztodo change from WEI_PRECISION to token decimals
+                        // eztodo change from WEI_PRECISION to token decimals?
                         const valueInFiatBn = convertCurrency(BigNumber.from(tx.value), WEI_PRECISION, 2, tlosInUsd);
                         const valueInFiat = +formatUnits(valueInFiatBn, 2);
 
@@ -293,7 +293,8 @@ export const useHistoryStore = defineStore(store_name, {
                     const nftTransfersInTx = allNftTransfers.filter(transfer => transfer.transaction === tx.hash);
 
                     if (nftTransfersInTx.length > 0) {
-                        // there is at least 1 NFT transfer in this transaction
+                        // there is at least 1 NFT transfer in this transaction,
+                        // so we need to fetch the NFT details for each transfer in this transaction
                         const nftDetailList = await Promise.all(
                             nftTransfersInTx.map(
                                 transfer => nftStore.fetchNftDetails(
@@ -305,7 +306,6 @@ export const useHistoryStore = defineStore(store_name, {
                             ),
                         );
 
-                        // nftStore.fetchNftDetails(label, transfer.contract, transfer.id ?? '')
                         nftDetailList.forEach((nftDetails, index) => {
                             if (nftDetails) {
                                 let nftMediaType: 'image' | 'video' | 'audio' | 'unknown' = 'unknown';
@@ -326,33 +326,21 @@ export const useHistoryStore = defineStore(store_name, {
                                     collectionAddress: transferInfo.contract,
                                     collectionName: nftDetails.contractPrettyName,
                                     type: nftMediaType,
+                                    nftInterface: transferInfo.type.toUpperCase() as NftTokenInterface,
                                     imgSrc: nftDetails.imageSrcFull,
                                     videoSrc: nftDetails.videoSrc,
                                     audioSrc: nftDetails.audioSrc,
                                 };
-                                // debugger;
-                                // eztodo use userAddressLower
-                                if (transferInfo.from.toLowerCase() === '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607'.toLowerCase()) {
+
+                                if (transferInfo.from.toLowerCase() === userAddressLower) {
                                     nftsOut.push(shapedNftTransfer);
-                                } else if (transferInfo.to.toLowerCase() === '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607'.toLowerCase()) {
+                                } else if (transferInfo.to.toLowerCase() === userAddressLower) {
                                     nftsIn.push(shapedNftTransfer);
                                 }
                             }
                         });
                     }
 
-
-                    // if (nftTransferIndex >= 0 && nftId !== undefined) {
-                    //     // transfer is an NFT transfer
-                    //     const nftDetails = await useNftsStore().fetchNftDetails(label, nftTransfers[nftTransferIndex].contract, nftId);
-                    //     console.log(nftDetails);
-
-                    //     // eztodo remove, pepegurl
-                    //     if (nftTransfers[nftTransferIndex].contract === '0x78cb091062cc8c32CD9c814599d1987b1dCc5093') {
-                    //         debugger;
-                    //     }
-                    // }
-
                     for (const tokenXfer of erc20Transfers) {
                         if (tokenXfer.symbol && tokenXfer.decimals) {
                             let transferAmountInFiat: number | undefined;
@@ -369,7 +357,6 @@ export const useHistoryStore = defineStore(store_name, {
                                 transferAmountInFiat = tokenFiatPrice ?
                                     tokenFiatPrice * +formatUnits(tokenXfer.value, tokenXfer.decimals) :
                                     undefined;
-
                             }
 
                             if (tokenXfer.from?.toLowerCase() === userAddressLower) {
@@ -390,22 +377,30 @@ export const useHistoryStore = defineStore(store_name, {
                         }
                     }
 
+                    const txIsASwap    = (valuesIn.length  > 0 || nftsIn.length  > 0) && (valuesOut.length > 0 || nftsOut.length > 0);
+                    const txIsASend    = (valuesOut.length > 0 || nftsOut.length > 0) && (valuesIn.length  === 0 && nftsIn.length  === 0);
+                    const txIsAReceive = (valuesIn.length  > 0 || nftsIn.length  > 0) && (valuesOut.length === 0 && nftsOut.length === 0);
+
+                    // eztodo occasional error when live fetching txs
                     if (isContractCreation) {
                         actionName = 'contractCreation';
-                    } else if (+tx.value && erc20Transfers.length === 0 && !functionName) {
-                        if (tx.from?.toLowerCase() === userAddressLower) {
-                            actionName = 'send';
-                        } else if (tx.to?.toLowerCase() === userAddressLower) {
-                            actionName = 'receive';
-                        }
-                    } else if (EvmSwapFunctionNames.includes(functionName)) {
+                    } else if (functionName === 'mint') {
+                        actionName = 'mint'; // eztodo handle this in the UI, add it to the correct interface as comment
+                    } else if (txIsASend) {
+                        // eztodo fix nft send/receive label
+                        // eztodo special case for mint
+                        actionName = 'send';
+                    } else if (txIsAReceive) {
+                        actionName = 'receive';
+                    } else if (txIsASwap) {
+                        // eztodo remove swapfunctionnames const
                         actionName = 'swap';
                     } else if (functionName) {
                         actionName = functionName;
                     }
                 }
 
-                const shapedTx = {
+                return {
                     id: tx.hash,
                     epoch: tx.timestamp / 1000,
                     actionName,
@@ -421,12 +416,13 @@ export const useHistoryStore = defineStore(store_name, {
                     gasFiatValue: gasInUsd,
                     failed: isFailed,
                 } as ShapedTransactionRow;
-
-                // The shapedTxs may not be in the same order as the transactions eztodo what does this mean
-                this.__shaped_evm_transaction_rows[label][index] = shapedTx;
             });
 
-            await Promise.all(transactionShapePromises);
+            const shapedTransactions = await Promise.all(transactionShapePromises);
+            this.setShapedTransactionRows(label, shapedTransactions);
+
+            // eztodo this one is frigged up, page 2 mind flayers
+            // https://www.teloscan.io/tx/0xa9d8d348dd524be0e649fabb9d8f9916b1f7c2222ea856e81a2ad91b219cf1b3
         },
 
 
diff --git a/src/antelope/stores/nfts.ts b/src/antelope/stores/nfts.ts
index 5c5af0dde..bdaaaca4c 100644
--- a/src/antelope/stores/nfts.ts
+++ b/src/antelope/stores/nfts.ts
@@ -132,6 +132,7 @@ export const useNftsStore = defineStore(store_name, {
                 return;
             }
 
+            // eztodo revert
             const owner = '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607';
 
             // we initialize the inventory for this label or take the existing one
@@ -190,7 +191,7 @@ export const useNftsStore = defineStore(store_name, {
                 // If we already have an inventory for that label, we search for the NFT in that list first
                 if (this.__inventory[label]) {
                     const nft = this.__inventory[label].list.find(
-                        nft => nft.item.contract.address.toLowerCase() === contract.toLowerCase() && nft.id === tokenId,
+                        nft => nft.item.contract?.address.toLowerCase() === contract.toLowerCase() && nft.id === tokenId,
                     );
                     if (nft) {
                         return nft;
@@ -206,7 +207,7 @@ export const useNftsStore = defineStore(store_name, {
                 this.__contracts[network] = this.__contracts[network] || {};
                 if (this.__contracts[network][contract]) {
                     const nft = this.__contracts[network][contract].list.find(
-                        nft => nft.item.contract.address.toLowerCase() === contract.toLowerCase() && nft.id === tokenId,
+                        nft => nft.item.contract?.address.toLowerCase() === contract.toLowerCase() && nft.id === tokenId,
                     );
                     if (nft) {
                         return nft;
diff --git a/src/antelope/types/EvmTransaction.ts b/src/antelope/types/EvmTransaction.ts
index 49c0ed76d..60600d626 100644
--- a/src/antelope/types/EvmTransaction.ts
+++ b/src/antelope/types/EvmTransaction.ts
@@ -1,4 +1,5 @@
 import { ethers } from 'ethers';
+import { NftTokenInterface } from 'src/antelope/types';
 
 export type EvmTransactionTopic = string[];
 
@@ -52,6 +53,7 @@ export interface NftTransactionData {
     videoSrc?: string;
     audioSrc?: string;
     type: 'image' | 'video' | 'audio' | 'unknown';
+    nftInterface: NftTokenInterface;
 }
 
 export const EvmSwapFunctionNames = [
diff --git a/src/antelope/types/NFTClass.ts b/src/antelope/types/NFTClass.ts
index ab46e9e9b..98cc3cddd 100644
--- a/src/antelope/types/NFTClass.ts
+++ b/src/antelope/types/NFTClass.ts
@@ -43,6 +43,10 @@ export class NFTContractClass {
     constructor(
         source: IndexerNftContract,
     ) {
+        // eztodo this
+        if (!source) {
+            debugger;
+        }
         this.indexer = source;
     }
 
diff --git a/src/pages/evm/nfts/NftInventoryPage.vue b/src/pages/evm/nfts/NftInventoryPage.vue
index bcaf14de8..77c27d557 100644
--- a/src/pages/evm/nfts/NftInventoryPage.vue
+++ b/src/pages/evm/nfts/NftInventoryPage.vue
@@ -17,7 +17,6 @@ import { truncateText } from 'src/antelope/stores/utils/text-utils';
 
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import TableControls from 'components/evm/TableControls.vue';
-import { isAddress } from 'ethers/lib/utils.js';
 import { truncateAddress } from 'src/antelope/stores/utils/text-utils';
 import { storeToRefs } from 'pinia';
 
diff --git a/src/pages/evm/wallet/WalletTransactionRow.vue b/src/pages/evm/wallet/WalletTransactionRow.vue
index 2a6c462a8..e50ad7b85 100644
--- a/src/pages/evm/wallet/WalletTransactionRow.vue
+++ b/src/pages/evm/wallet/WalletTransactionRow.vue
@@ -1,18 +1,19 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-
 import InlineSvg from 'vue-inline-svg';
 
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { useChainStore, useNftsStore, useUserStore } from 'src/antelope';
+import { NFTClass, ShapedTransactionRow } from 'src/antelope/types';
+
 import { getLongDate } from 'src/antelope/stores/utils';
-import { useChainStore, useUserStore } from 'src/antelope';
-import { ShapedTransactionRow } from 'src/antelope/types';
+import { getCurrencySymbol, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { truncateAddress } from 'src/antelope/stores/utils/text-utils';
 
 import ExternalLink from 'components/ExternalLink.vue';
 import TimeStamp from 'components/TimeStamp.vue';
 import ToolTip from 'components/ToolTip.vue';
-import { getCurrencySymbol, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
-import { truncateAddress } from 'src/antelope/stores/utils/text-utils';
+import NftViewer from 'pages/evm/nfts/NftViewer.vue';
 
 const userStore = useUserStore();
 
@@ -28,6 +29,7 @@ export default defineComponent({
         TimeStamp,
         ExternalLink,
         InlineSvg,
+        NftViewer,
     },
     props: {
         transaction: {
@@ -35,13 +37,11 @@ export default defineComponent({
             required: true,
         },
     },
+    data: () => ({
+        loading: true,
+        nftData: {} as Record<string, NFTClass>, // keyed like {contract address}-{tokenId}
+    }),
     computed: {
-        test() {
-            if (this.transaction.id.toLowerCase() === '0xf7a2cadfce5adcd33c592d3aa277bf87ea5c06961e6a7e4f12e6a2bae7b595e5') {
-                debugger;
-            }
-            return '';
-        },
         fiatLocale(): string {
             return useUserStore().fiatLocale;
         },
@@ -144,6 +144,27 @@ export default defineComponent({
             return this.formatAmount(this.transaction.gasFiatValue ?? 0, undefined, true);
         },
     },
+    async created() {
+        const nftTransfers = [...this.transaction.nftsIn, ...this.transaction.nftsOut];
+
+        if (nftTransfers.length) {
+            await Promise.all(nftTransfers.map(
+                async (nftTransfer) => {
+                    const nftDetails = await useNftsStore().fetchNftDetails(
+                        'current',
+                        nftTransfer.collectionAddress,
+                        nftTransfer.tokenId,
+                        nftTransfer.nftInterface,
+                    );
+                    if (nftDetails) {
+                        this.nftData[`${nftTransfer.collectionAddress}-${nftTransfer.tokenId}`] = nftDetails;
+                    }
+                },
+            ));
+        }
+
+        this.loading = false;
+    },
     methods: {
         formatAmount(amount: number, symbol: string = userStore.fiatCurrency, useSymbolCharacter: boolean = false) {
             const decimals = symbol === userStore.fiatCurrency ? 2 : 4;
@@ -173,15 +194,15 @@ export default defineComponent({
         getTruncatedAddress(address: string) {
             return truncateAddress(address);
         },
+        getCachedNftData(collectionAddress: string, tokenId: string): NFTClass | undefined {
+            return this.nftData[`${collectionAddress}-${tokenId}`];
+        },
     },
 });
 </script>
 
 <template>
-<div
-    class="c-transaction-row"
-    :class="{ test: transaction.id.toLowerCase() === '0xf7a2cadfce5adcd33c592d3aa277bf87ea5c06961e6a7e4f12e6a2bae7b595e5' }"
->
+<div class="c-transaction-row">
     <div class="c-transaction-row__info-container c-transaction-row__info-container--first">
         <div class="c-transaction-row__interaction-icon-container">
             <InlineSvg
@@ -272,22 +293,15 @@ export default defineComponent({
             :key="`nfts-out-${index}`"
             class="c-transaction-row__value-container"
         >
-            <div class="c-transaction-row__nft c-transaction-row__nft--out">
+            <div
+                v-if="getCachedNftData(nftTransfer.collectionAddress, nftTransfer.tokenId)"
+                class="c-transaction-row__nft c-transaction-row__nft--out"
+            >
                 <span>-{{ nftTransfer.quantity }}</span>
-                <!-- eztodo add test case for no image src -->
-                <img
-                    v-if="nftTransfer.imgSrc"
-                    :src="nftTransfer.imgSrc"
-                    :alt="nftTransfer.tokenName"
-                    height="40"
-                    width="40"
-                    class="c-transaction-row__nft-thumbnail"
-                >
-                <q-icon
-                    v-else
-                    name="o_image_not_supported"
-                    color="grey"
-                    size="40px"
+                <NftViewer
+                    :nft="getCachedNftData(nftTransfer.collectionAddress, nftTransfer.tokenId) as NFTClass"
+                    :previewMode="false"
+                    :tileMode="false"
                 />
                 <div class="c-transaction-row__nft-info-container">
                     <div class="c-transaction-row__nft-name-container">
@@ -332,22 +346,16 @@ export default defineComponent({
             :key="`nfts-in-${index}`"
             class="c-transaction-row__value-container"
         >
-            <div class="c-transaction-row__nft c-transaction-row__nft--in">
+            <div
+                v-if="getCachedNftData(nftTransfer.collectionAddress, nftTransfer.tokenId)"
+                class="c-transaction-row__nft c-transaction-row__nft--in"
+            >
                 <span>+{{ nftTransfer.quantity }}</span>
-                <!-- eztodo add test case for no image src -->
-                <img
-                    v-if="nftTransfer.imgSrc"
-                    :src="nftTransfer.imgSrc"
-                    :alt="nftTransfer.tokenName"
-                    height="40"
-                    width="40"
-                    class="c-transaction-row__nft-thumbnail"
-                >
-                <q-icon
-                    v-else
-                    name="o_image_not_supported"
-                    color="grey"
-                    size="40px"
+                <!-- eztodo add test case to PR for no image src -->
+                <NftViewer
+                    :nft="getCachedNftData(nftTransfer.collectionAddress, nftTransfer.tokenId) as NFTClass"
+                    :previewMode="false"
+                    :tileMode="false"
                 />
                 <div class="c-transaction-row__nft-info-container">
                     <div class="c-transaction-row__nft-name-container">
@@ -392,9 +400,6 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
-.test {
-    border: 1px solid red;
-}
 .c-transaction-row {
     max-width: 1000px;
     padding: 16px 8px;
diff --git a/src/pages/evm/wallet/WalletTransactionsTab.vue b/src/pages/evm/wallet/WalletTransactionsTab.vue
index bd382d171..b6cd358d5 100644
--- a/src/pages/evm/wallet/WalletTransactionsTab.vue
+++ b/src/pages/evm/wallet/WalletTransactionsTab.vue
@@ -153,6 +153,7 @@ export default defineComponent({
         <h2>{{ $t('global.transactions') }}</h2>
         <span v-if="totalRowsText">{{ totalRowsText }}</span>
     </div>
+
     <template v-if="loading">
         <q-skeleton
             v-for="i of pagination.rowsCurrentPage"
@@ -169,21 +170,12 @@ export default defineComponent({
         {{ $t('evm_wallet.no_transactions_found') }}
     </h5>
 
-    <template
-        v-for="i of pagination.rowsCurrentPage"
-        v-else
-        :key="`tx-${i}`"
-    >
-        <template v-if="!shapedTransactions[i-1]">
-            <q-skeleton
-                type="QToolbar"
-                class="q-mb-lg"
-            />
-        </template>
-
+    <!-- eztodo transactions dont exist on teloscan -->
+    <template v-else>
         <WalletTransactionRow
-            v-else
-            :transaction="shapedTransactions[i-1]"
+            v-for="(tx, index) of shapedTransactions"
+            :key="`tx-${index}`"
+            :transaction="tx"
             class="q-mb-lg"
         />
     </template>

From c1129aae9e1f3c6703a1f879125fc9b11801d0f7 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 063/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue | 4 ++++
 src/i18n/en-us/index.js       | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 9fb48b9c9..fe9b79a2b 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,7 +279,11 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
+<<<<<<< HEAD
                 <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
+=======
+                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
+>>>>>>> a8908111 (adding page header component for Staking Section)
             </li>
 
             <li
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index d20cab566..3de2c9501 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 4e581f5459f5d032d3d7a00355896a4191e1ccc8 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:10:04 -0400
Subject: [PATCH 064/268] use i18n for apy label

---
 src/components/evm/AppNav.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index fe9b79a2b..9fb48b9c9 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,11 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-<<<<<<< HEAD
                 <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
-=======
-                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
->>>>>>> a8908111 (adding page header component for Staking Section)
             </li>
 
             <li

From a5066f4ff8eb29dfe006661315147295f1507a6f Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 22 Aug 2023 16:38:41 -0300
Subject: [PATCH 065/268] saving WIP

---
 src/antelope/chains/EVMChainSettings.ts       | 47 ++++++++--
 .../chains/evm/telos-evm-testnet/index.ts     |  5 ++
 src/antelope/chains/evm/telos-evm/index.ts    |  5 ++
 src/antelope/stores/balances.ts               |  3 +-
 src/antelope/stores/chain.ts                  | 71 ++++++++++++++--
 src/antelope/stores/evm.ts                    | 20 +++--
 src/antelope/types/ChainSettings.ts           |  3 +
 src/antelope/wallets/index.ts                 |  2 +-
 src/components/evm/AppNav.vue                 | 27 +++++-
 src/components/evm/ScrollableInfoCards.vue    | 28 +++++-
 src/i18n/en-us/index.js                       |  1 +
 src/pages/evm/staking/StakingPageHeader.vue   | 85 +++++++++++++------
 12 files changed, 244 insertions(+), 53 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 83e9c9e9b..2675466b3 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -42,6 +42,9 @@ export default abstract class EVMChainSettings implements ChainSettings {
     // External query API support
     protected hyperion: AxiosInstance = axios.create({ baseURL: this.getHyperionEndpoint() });
 
+    // External query API support
+    protected api: AxiosInstance = axios.create({ baseURL: this.getApiEndpoint() });
+
     // External trusted metadata bucket for EVM contracts
     protected contractsBucket: AxiosInstance = axios.create({ baseURL: this.getTrustedContractsBucket() });
 
@@ -61,7 +64,10 @@ export default abstract class EVMChainSettings implements ChainSettings {
     tokenListPromise: Promise<TokenClass[]> | null = null;
 
     // EvmContracts cache mapped by address
-    protected contracts: Record<string, EvmContract | false> = {};
+    protected contracts: Record<string, {
+        promise: Promise<EvmContract | false>;
+        resolve?: (value: EvmContract | false) => void;
+    }> = {};
 
     constructor(network: string) {
         this.network = network;
@@ -214,6 +220,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract getDisplay(): string;
     abstract getHyperionEndpoint(): string;
     abstract getRPCEndpoint(): RpcEndpoint;
+    abstract getApiEndpoint(): string;
     abstract getPriceData(): Promise<PriceChartData>;
     abstract getUsdPrice(): Promise<number>;
     abstract getBuyMoreOfTokenLink(): string;
@@ -226,6 +233,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract hasIndexerSupport(): boolean;
     abstract trackAnalyticsEvent(params: Record<string, unknown>): void;
 
+    async getApy(): Promise<string> {
+        const response = await this.api.get('apy/evm');
+        return response.data as string;
+    }
+
     async getBalances(account: string): Promise<TokenBalance[]> {
         if (!this.hasIndexerSupport()) {
             console.error('Indexer API not supported for this chain:', this.getNetwork());
@@ -351,22 +363,47 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return `${token.symbol}-${token.address}-${this.getNetwork()}`;
     }
 
-    getContract(address: string): EvmContract | false | null {
+    async getContract(address: string): Promise<EvmContract | false | null> {
         const key = address.toLowerCase();
-        return this.contracts[key] ?? null;
+        const returnValue = this.contracts[key]?.promise ?? null;
+        if (!this.contracts[key]) {
+            this.contracts[key] = {
+                promise: Promise.resolve(false),
+            };
+            this.contracts[key].promise = new Promise((resolve) => {
+                this.contracts[key].resolve = resolve;
+            });
+        }
+        return returnValue;
     }
 
     addContract(address: string, contract: EvmContract) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
-            this.contracts[key] = contract;
+            this.contracts[key] = {
+                promise: Promise.resolve(contract),
+            };
+        } else {
+            if (this.contracts[key].resolve) {
+                this.contracts[key].resolve?.(contract);
+            } else {
+                console.error('Error: Contract already exists', address);
+            }
         }
     }
 
     setContractAsNotExisting(address: string) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
-            this.contracts[key] = false;
+            this.contracts[key] = {
+                promise: Promise.resolve(false),
+            };
+        } else {
+            if (this.contracts[key].resolve) {
+                this.contracts[key].resolve?.(false);
+            } else {
+                console.error('Error: Contract already exists', address);
+            }
         }
     }
 
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index 4c2ed6eef..20b915bfd 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -51,6 +51,7 @@ const RPC_ENDPOINT = {
     path: '/evm',
 };
 
+const API_ENDPOINT = 'https://api-dev.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://testnet.teloscan.io';
 const ECOSYSTEM_URL = 'https://www.telos.net/ecosystem';
@@ -81,6 +82,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return RPC_ENDPOINT;
     }
 
+    getApiEndpoint(): string {
+        return API_ENDPOINT;
+    }
+
     getPriceData(): Promise<PriceChartData> {
         return api.getCoingeckoPriceChartData('telos');
     }
diff --git a/src/antelope/chains/evm/telos-evm/index.ts b/src/antelope/chains/evm/telos-evm/index.ts
index c4e4acdf9..2d98d7581 100644
--- a/src/antelope/chains/evm/telos-evm/index.ts
+++ b/src/antelope/chains/evm/telos-evm/index.ts
@@ -51,6 +51,7 @@ const RPC_ENDPOINT = {
     path: '/evm',
 };
 
+const API_ENDPOINT = 'https://api.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://teloscan.io';
 const ECOSYSTEM_URL = 'https://www.telos.net/ecosystem';
@@ -81,6 +82,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return RPC_ENDPOINT;
     }
 
+    getApiEndpoint(): string {
+        return API_ENDPOINT;
+    }
+
     getPriceData(): Promise<PriceChartData> {
         return api.getCoingeckoPriceChartData('telos');
     }
diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 71ea9defb..fab027d9e 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -177,7 +177,8 @@ export const useBalancesStore = defineStore(store_name, {
             this.trace('updateSystemTokensPrices', label);
             try {
                 // take the three system tokens
-                const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
+                const chain = useChainStore();
+                const chain_settings = chain.getChain(label).settings as EVMChainSettings;
                 const sysToken = chain_settings.getSystemToken();
                 const wrpToken = chain_settings.getWrappedSystemToken();
 
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index e22c87ca1..2ba011543 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -17,6 +17,8 @@
 
 import { defineStore } from 'pinia';
 import {
+    useAccountStore,
+    useEVMStore,
     useFeedbackStore,
 } from 'src/antelope';
 
@@ -70,6 +72,7 @@ export interface ChainModel {
 
 export interface EvmChainModel {
     apy: string;
+    stakeRatio: ethers.BigNumber;
     gasPrice: ethers.BigNumber;
     settings: EVMChainSettings;
     tokens: TokenClass[];
@@ -84,11 +87,12 @@ export interface NativeChainModel {
 const newChainModel = (network: string, isNative: boolean): ChainModel => {
     const model = {
         apy: '',
+        stakeRatio: ethers.constants.Zero,
         settings: settings[network],
         tokens: [],
     } as ChainModel;
     if (!isNative) {
-        (model as EvmChainModel).gasPrice = ethers.BigNumber.from(0);
+        (model as EvmChainModel).gasPrice = ethers.constants.Zero;
     }
     return model;
 };
@@ -116,6 +120,7 @@ export const useChainStore = defineStore(store_name, {
         getExplorerUrl: () => (network: string) => (settings[network] as EVMChainSettings).getExplorerUrl(),
         getEcosystemUrl: () => (network: string) => (settings[network] as EVMChainSettings).getEcosystemUrl(),
         getNetworkSettings: () => (network: string) => settings[network],
+        getStakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).stakeRatio ?? ethers.constants.Zero,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -129,6 +134,7 @@ export const useChainStore = defineStore(store_name, {
                     this.updateSettings(label),
                     this.updateApy(label),
                     this.updateGasPrice(label),
+                    this.updateStakedRatio(label),
                 ]);
             } catch (error) {
                 console.error(error);
@@ -153,11 +159,7 @@ export const useChainStore = defineStore(store_name, {
             this.trace('updateApy', label);
             const chain = this.getChain(label);
             try {
-                if (chain.settings.isNative()) {
-                    chain.apy = await (chain.settings as NativeChainSettings).getApy();
-                } else {
-                    chain.apy = '';
-                }
+                chain.apy = await chain.settings.getApy();
             } catch (error) {
                 console.error(error);
                 throw new Error('antelope.chain.error_apy');
@@ -165,6 +167,57 @@ export const useChainStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading('updateApy');
             }
         },
+        async actualUpdateStakedRatio(label: string): Promise<ethers.BigNumber> {
+            // first we need the contract instance to be able to execute queries
+            this.trace('actualUpdateStakedRatio', label);
+            useFeedbackStore().setLoading('actualUpdateStakedRatio');
+            const evm = useEVMStore();
+            const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
+            const sysToken = chain_settings.getSystemToken();
+            const stkToken = chain_settings.getStakedSystemToken();
+            const authenticator = useAccountStore().getEVMAuthenticator(label);
+            if (!authenticator) {
+                useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+                this.trace('actualUpdateStakedRatio', label, '-> no authenticator');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contract = await evm.getContract(authenticator, stkToken.address, stkToken.type);
+            if (!contract) {
+                useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+                this.trace('actualUpdateStakedRatio', label, '-> no contract');
+                return ethers.constants.Zero;
+            }
+            const contractInstance = await contract.getContractInstance();
+            // Now we preview a deposit of 1 SYS to get the ratio
+            const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
+            const ratio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+
+            // Finally we update the store
+            this.setStakedRatio(label, ratio);
+            useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+            return ratio;
+        },
+        async updateStakedRatio(label: string): Promise<ethers.BigNumber> {
+            const accountModel = useAccountStore().getAccount(label);
+            if (accountModel && accountModel.account) {
+                // if the account is already logged, we can update the staked ratio
+                return this.actualUpdateStakedRatio(label);
+            } else {
+                // if the account is not logged, we need to wait for the login and then update the staked ratio
+                return new Promise((resolve) => {
+                    const sub = getAntelope().events.onAccountChanged.subscribe((result) => {
+                        if (result.label === label) {
+                            sub.unsubscribe();
+                            if (result.account) {
+                                // we need the user to be logged because the way of getting the staked ratio is by
+                                // executing an action from contract and that internally attempts retrieve the account from the provided signer
+                                resolve(this.actualUpdateStakedRatio(label));
+                            }
+                        }
+                    });
+                });
+            }
+        },
         async updateGasPrice(label: string): Promise<void> {
             useFeedbackStore().setLoading('updateGasPrice');
             this.trace('updateGasPrice');
@@ -211,6 +264,7 @@ export const useChainStore = defineStore(store_name, {
                 // make the change only if they are different
                 if (network !== this.__chains[label]?.settings.getNetwork()) {
                     this.__chains[label] = newChainModel(network, settings[network].isNative());
+                    this.trace('setChain', label, network, '--> void this.updateChainData(label);');
                     void this.updateChainData(label);
                     getAntelope().events.onNetworkChanged.next(
                         { label, chain: this.__chains[label] },
@@ -220,6 +274,11 @@ export const useChainStore = defineStore(store_name, {
                 throw new AntelopeError('antelope.chain.error_invalid_network', { network });
             }
         },
+        setStakedRatio(label: string, ratio: ethers.BigNumber) {
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
+            (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
+        },
     },
 });
 
diff --git a/src/antelope/stores/evm.ts b/src/antelope/stores/evm.ts
index 15087714e..5146a05af 100644
--- a/src/antelope/stores/evm.ts
+++ b/src/antelope/stores/evm.ts
@@ -62,7 +62,7 @@ export interface EVMState {
 const store_name = 'evm';
 
 const createManager = (authenticator: EVMAuthenticator):EvmContractManagerI => ({
-    getSigner: async () => toRaw((await authenticator.web3Provider()).getSigner()),
+    getSigner: async () => toRaw((await authenticator.web3Provider()).getSigner(useAccountStore().getAccount(authenticator.label).account)),
     getWeb3Provider: () => authenticator.web3Provider(),
     getFunctionIface: (hash:string) => toRaw(useEVMStore().getFunctionIface(hash)),
     getEventIface: (hash:string) => toRaw(useEVMStore().getEventIface(hash)),
@@ -332,7 +332,8 @@ export const useEVMStore = defineStore(store_name, {
             // Get from already queried contracts, add token data if needed & not present
             // (ie: queried beforehand w/o suspectedToken or a wrong suspectedToken)
             const chain_settings = useChainStore().getChain(authenticator.label).settings as EVMChainSettings;
-            const cached = chain_settings.getContract(addressLower);
+            const cached = await chain_settings.getContract(addressLower);
+            this.trace('getContract', address, 'cached:', cached);
             // If cached is null, it means this is the first time this address is queried
             if (cached !== null) {
                 if (
@@ -347,10 +348,6 @@ export const useEVMStore = defineStore(store_name, {
                 }
             }
 
-
-            // We mark this address as not existing so we don't query it again
-            chain_settings.setContractAsNotExisting(addressLower);
-
             // Then we try to get the contract creation info. If it fails, we never overwrite the previous call to set contract as not existing
             const creationInfo = await this.getContractCreation(authenticator, addressLower);
             // The the contract passes the creation info check,
@@ -369,8 +366,15 @@ export const useEVMStore = defineStore(store_name, {
                 return contract;
             }
 
-            this.trace('getContract', 'returning empty contract', address, creationInfo);
-            return await this.getEmptyContract(authenticator, addressLower, creationInfo);
+            if (creationInfo) {
+                this.trace('getContract', 'returning empty contract', address, creationInfo);
+                return await this.getEmptyContract(authenticator, addressLower, creationInfo);
+            } else {
+                // We mark this address as not existing so we don't query it again
+                this.trace('getContract', 'returning null', address);
+                chain_settings.setContractAsNotExisting(addressLower);
+                return null;
+            }
         },
 
         async checkBucket(authenticator: EVMAuthenticator, address:string): Promise<EvmContractMetadata | null> {
diff --git a/src/antelope/types/ChainSettings.ts b/src/antelope/types/ChainSettings.ts
index ff6ee121b..d21f60f07 100644
--- a/src/antelope/types/ChainSettings.ts
+++ b/src/antelope/types/ChainSettings.ts
@@ -11,11 +11,14 @@ export interface ChainSettings {
     getSmallLogoPath(): string;
     getLargeLogoPath(): string;
     getChainId(): string;
+    getHyperionEndpoint(): string;
     getRPCEndpoint(): RpcEndpoint;
+    getApiEndpoint(): string;
     getPriceData(): Promise<PriceChartData>;
     getUsdPrice(): Promise<number>;
     getSystemTokens(): TokenClass[];
     getNFTsInventory(address: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>;
     getNFTsCollection(contract: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>;
     trackAnalyticsEvent(params: Record<string, unknown>): void;
+    getApy(): Promise<string>;
 }
diff --git a/src/antelope/wallets/index.ts b/src/antelope/wallets/index.ts
index 33b7ee216..c29fab7e1 100644
--- a/src/antelope/wallets/index.ts
+++ b/src/antelope/wallets/index.ts
@@ -26,12 +26,12 @@ export class AntelopeWallets {
         this.trace('getAutenticator', name);
         return this.authenticators.get(name);
     }
+
 }
 
 export * from 'src/antelope/wallets/authenticators/EVMAuthenticator';
 export * from 'src/antelope/wallets/authenticators/InjectedProviderAuth';
 export * from 'src/antelope/wallets/authenticators/MetamaskAuth';
 export * from 'src/antelope/wallets/authenticators/OreIdAuth';
-export * from 'src/antelope/wallets/authenticators/SafePalAuth';
 export * from 'src/antelope/wallets/authenticators/WalletConnectAuth';
 export * from 'src/antelope/wallets/authenticators/SafePalAuth';
diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 9fb48b9c9..a7e94624c 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -5,7 +5,7 @@ import InlineSvg from 'vue-inline-svg';
 import UserInfo from 'components/evm/UserInfo.vue';
 import { getAntelope, useChainStore } from 'src/antelope';
 import EVMLoginButtons from 'pages/home/EVMLoginButtons.vue';
-import { getShortenedHash } from 'src/antelope/stores/utils';
+import { getShortenedHash, prettyPrintBalance } from 'src/antelope/stores/utils';
 
 const ant = getAntelope();
 const accountStore = ant.stores.account;
@@ -25,6 +25,17 @@ export default defineComponent({
         notifyOnSuccessfulLogin: false,
     }),
     computed: {
+        isLoadingApy() {
+            return this.prettyPrintApy === '';
+        },
+        prettyPrintApy() {
+            const apy = chainStore.currentEvmChain?.apy;
+            if (apy) {
+                return apy + '%';
+            } else {
+                return '';
+            }
+        },
         showMenuIcon() {
             return this.$q.screen.lt.md && !this.showBackButton;
         },
@@ -279,7 +290,14 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
+                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }}
+                    <q-spinner
+                        v-if="isLoadingApy"
+                        color="white"
+                        class="c-app-nav__apy-spinner"
+                    />
+                    <b> {{ prettyPrintApy }}</b>
+                </span>
             </li>
 
             <li
@@ -491,6 +509,11 @@ export default defineComponent({
         display: inline-block;
     }
 
+    &__apy-spinner {
+        size: 16px;
+        margin-top: -5px;
+    }
+
     &__icon {
         // svg color overrides
         &--current-route:not(#{$this}__icon--acorn) path {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 1b10f0552..2285e02cd 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -9,6 +9,8 @@ const props = defineProps<{
         secondaryText?: string;
         lowContrastSecondaryText?: boolean;
         useSmallBox?: boolean;
+        isPrimaryLoading?: boolean;
+        isSecondaryLoading?: boolean;
     }[];
 }>();
 </script>
@@ -35,14 +37,23 @@ const props = defineProps<{
             />
         </div>
 
-        <h3>{{ card.primaryText }}</h3>
+        <h3 v-if="card.isPrimaryLoading" >
+            <q-spinner-dots class="c-scrollable-info-cards__primary-loading"  color="primary" />
+        </h3>
+        <h3 v-else class="c-scrollable-info-cards__primary-text">
+            {{ card.primaryText }}
+        </h3>
+
         <span
             v-if="card.secondaryText"
             :class="{
-                'u-text--low-contrast': card.lowContrastSecondaryText
+                'c-scrollable-info-cards__low-contrast': card.lowContrastSecondaryText
             }"
         >
-            {{ card.secondaryText }}
+            <q-spinner-dots v-if="card.isSecondaryLoading" class="c-scrollable-info-cards__secondary-loading" color="primary" />
+            <span v-else class="c-scrollable-info-cards__secondary-text">
+                {{ card.secondaryText }}
+            </span>
         </span>
     </div>
 </div>
@@ -67,6 +78,17 @@ const props = defineProps<{
         margin: auto;
     }
 
+    &__primary-loading {
+        margin-left: 4px;
+    }
+
+    &__secondary-loading {
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
+    }
+
+
     &__card {
         background-color: var(--bg-color);
         padding: 12px;
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3de2c9501..d54e6ffba 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -520,6 +520,7 @@ export default {
             error_update_data: 'Error in updating data',
             error_apy: 'Error in getting APY',
             error_invalid_network: 'Invalid network',
+            error_no_default_authenticator: 'No default authenticator found',
         },
         account: {
             error_login_native: 'An error has occurred trying to login to the native chain',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 52b4b682d..d5fcb9209 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -4,41 +4,70 @@ import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
 import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
-import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
 
 import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
 
-
+const label = 'current';
 const { t: $t } = useI18n();
 const userStore = useUserStore();
 const balancesStore = useBalancesStore();
 const chainStore = useChainStore();
 const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
 // data
-const systemTokenPrice = ref(0); // always equal to wrapped token price
 const loading = ref(true);
 
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
 const fiatCurrency = computed(() => userStore.fiatCurrency);
-const systemTokenName = computed(() => chainSettings.getSystemToken().name);
-const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
-const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
+const systemToken = chainSettings.getSystemToken();
+const stakedToken = chainSettings.getStakedSystemToken();
 
 const totalFiatValueText = ref('$ 4,324.35');
 
-const stakedFiatValueText = ref('$ 4,000.23');
-const stakedTokenBalanceBn = ref(ethers.utils.parseUnits('34021.230', WEI_PRECISION));
+// First cell: Staked
+const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || !stakedRatio.value.isZero());
+const stakedExpressedInSystemBalanceBn = computed(() => {
+    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(stakedRatio.value, stakedToken.decimals);
+        return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const systemTokenPrice = ref(systemToken.price.value);
+const stakedFiatValueBn = computed(() => {
+    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(stakedExpressedInSystemBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+
+// Second cell: Unstaking
 const unstakingFiatValueText = ref('$ 200.72');
-const unstakingBalanceBn = ref(ethers.utils.parseUnits('1242.0312', WEI_PRECISION));
-const withdrawableFiatValueText = ref('$ 123.02');
-const withdrawableBalanceBn = ref(ethers.utils.parseUnits('245.0225', WEI_PRECISION));
+const unstakingBalanceBn = ref(stakedTokenBalanceBn);
 
-const apyPrittyPrint = ref('8.23%');
+// Third cell: Withdrawable
+const withdrawableFiatValueText = ref('$ 123.02');
+const withdrawableBalanceBn = ref(stakedRatio);
+
+const apyPrittyPrint = computed(() => {
+    const apy = chainStore.currentEvmChain?.apy;
+    if (apy) {
+        return apy + '%';
+    } else {
+        return '--';
+    }
+});
+const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref('10 days');
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
@@ -46,44 +75,46 @@ const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
 const evmNetworkName = ref('Telos EVM');
 
 const firstLineData = computed(() => [{
-    label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
-    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
-    primaryText: stakedFiatValueText.value,
-    secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
+    label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
+    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
+    primaryText: prettyPrintToken(stakedFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isStakedLoading.value ? '' : prettyPrintToken(stakedExpressedInSystemBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
+    isPrimaryLoading: isStakedLoading.value,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.unstaking_card_label'),
-    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
     primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.withdrawable_card_label'),
-    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
     primaryText: withdrawableFiatValueText.value,
-    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemTokenSymbol.value),
+    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }]);
 
 const secondLineData = computed(() => [{
-    label: $t('evm_stake.apy_card_label', { symbol: systemTokenSymbol.value }),
-    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    label: $t('evm_stake.apy_card_label', { symbol: systemToken.symbol }),
+    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
     secondaryText: apyPrittyPrint.value,
     lowContrastSecondaryText: false,
+    isSecondaryLoading: apyisLoading.value,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.unstaking_period_card_label'),
-    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
     secondaryText: unlockPeriod.value,
     lowContrastSecondaryText: false,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.tvl_card_label'),
-    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
-    secondaryText: prettyPrintToken(tvlAmountBn.value, systemTokenSymbol.value),
+    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
+    secondaryText: prettyPrintToken(tvlAmountBn.value, systemToken.symbol),
     lowContrastSecondaryText: false,
     useSmallBox: true,
 }]);
@@ -92,7 +123,7 @@ const secondLineData = computed(() => [{
 // methods
 onBeforeMount(() => {
     chainSettings.getUsdPrice().then((price) => {
-        systemTokenPrice.value = price;
+        // systemTokenPrice.value = price;
     }).finally(() => {
         loading.value = false;
     });
@@ -114,7 +145,7 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 <template>
 <div class="c-staking-header">
     <div class="text-center q-mb-xl">
-        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemTokenName }) }}</h5>
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 

From 11993d506f083f86a58595991ac0aa4867ffc50c Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 23 Aug 2023 14:01:24 -0300
Subject: [PATCH 066/268] saving WIP

---
 src/antelope/stores/chain.ts                | 21 +++++++++++++++------
 src/pages/evm/staking/StakingPageHeader.vue | 11 +++++++++--
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 2ba011543..66eb3d516 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -73,6 +73,7 @@ export interface ChainModel {
 export interface EvmChainModel {
     apy: string;
     stakeRatio: ethers.BigNumber;
+    unstakeRatio: ethers.BigNumber;
     gasPrice: ethers.BigNumber;
     settings: EVMChainSettings;
     tokens: TokenClass[];
@@ -88,6 +89,7 @@ const newChainModel = (network: string, isNative: boolean): ChainModel => {
     const model = {
         apy: '',
         stakeRatio: ethers.constants.Zero,
+        unstakeRatio: ethers.constants.Zero,
         settings: settings[network],
         tokens: [],
     } as ChainModel;
@@ -121,6 +123,7 @@ export const useChainStore = defineStore(store_name, {
         getEcosystemUrl: () => (network: string) => (settings[network] as EVMChainSettings).getEcosystemUrl(),
         getNetworkSettings: () => (network: string) => settings[network],
         getStakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).stakeRatio ?? ethers.constants.Zero,
+        getUnstakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).unstakeRatio ?? ethers.constants.Zero,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -167,7 +170,7 @@ export const useChainStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading('updateApy');
             }
         },
-        async actualUpdateStakedRatio(label: string): Promise<ethers.BigNumber> {
+        async actualUpdateStakedRatio(label: string): Promise<void> {
             // first we need the contract instance to be able to execute queries
             this.trace('actualUpdateStakedRatio', label);
             useFeedbackStore().setLoading('actualUpdateStakedRatio');
@@ -185,19 +188,20 @@ export const useChainStore = defineStore(store_name, {
             if (!contract) {
                 useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
                 this.trace('actualUpdateStakedRatio', label, '-> no contract');
-                return ethers.constants.Zero;
+                return;
             }
             const contractInstance = await contract.getContractInstance();
             // Now we preview a deposit of 1 SYS to get the ratio
             const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
-            const ratio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+            const stakedRatio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+            const unstakedRatio:ethers.BigNumber = await contractInstance.previewWithdraw(oneSys);
 
             // Finally we update the store
-            this.setStakedRatio(label, ratio);
+            this.setStakedRatio(label, stakedRatio);
+            this.setUnstakedRatio(label, unstakedRatio);
             useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
-            return ratio;
         },
-        async updateStakedRatio(label: string): Promise<ethers.BigNumber> {
+        async updateStakedRatio(label: string): Promise<void> {
             const accountModel = useAccountStore().getAccount(label);
             if (accountModel && accountModel.account) {
                 // if the account is already logged, we can update the staked ratio
@@ -279,6 +283,11 @@ export const useChainStore = defineStore(store_name, {
             this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
         },
+        setUnstakedRatio(label: string, ratio: ethers.BigNumber) {
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            this.trace('setUnstakedRatio', label, ratio.toString(), ratioNumber);
+            (this.__chains[label] as EvmChainModel).unstakeRatio = ratio;
+        },
     },
 });
 
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index d5fcb9209..65b9bee54 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -32,10 +32,14 @@ const totalFiatValueText = ref('$ 4,324.35');
 // First cell: Staked
 const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
 const stakedRatio = computed(() => chainStore.getStakedRatio(label));
-const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || !stakedRatio.value.isZero());
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
     if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
-        const ratioNumber = ethers.utils.formatUnits(stakedRatio.value, stakedToken.decimals);
+        console.log('stakedRatio', stakedRatio.value.toString());
+        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
+        console.log('inverseRatio', inverseRatio.toString());
+        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
+        console.log('ratioNumber', ratioNumber);
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -149,6 +153,9 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 
+    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
+    <div>{{ stakedRatio?.toString() }}</div>
+
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 766d40f8a0bbd8a5d94299007406e2af4e10e3c6 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 24 Aug 2023 20:00:04 -0300
Subject: [PATCH 067/268] Fetching real Rex data for the staking page header

---
 src/antelope/chains/EVMChainSettings.ts       |   1 +
 .../chains/evm/telos-evm-testnet/index.ts     |   6 +-
 src/antelope/chains/evm/telos-evm/index.ts    |   6 +-
 src/antelope/stores/rex.ts                    | 141 +++++++++++++++++-
 src/pages/evm/staking/StakingPageHeader.vue   |  65 ++++++--
 5 files changed, 200 insertions(+), 19 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 2675466b3..b406f0d5d 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -216,6 +216,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract getSystemToken(): TokenClass;
     abstract getStakedSystemToken(): TokenClass;
     abstract getWrappedSystemToken(): TokenClass;
+    abstract getEscrowContractAddress(): string;
     abstract getChainId(): string;
     abstract getDisplay(): string;
     abstract getHyperionEndpoint(): string;
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index 20b915bfd..7f1778c14 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -50,7 +50,7 @@ const RPC_ENDPOINT = {
     port: 443,
     path: '/evm',
 };
-
+const ESCROW_CONTRACT_ADDRESS = '0x7E9cF9fBc881652B05BB8F26298fFAB538163b6f';
 const API_ENDPOINT = 'https://api-dev.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://testnet.teloscan.io';
@@ -102,6 +102,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return W_TOKEN;
     }
 
+    getEscrowContractAddress(): string {
+        return ESCROW_CONTRACT_ADDRESS;
+    }
+
     async getUsdPrice(): Promise<number> {
         if (this.hasIndexerSupport()) {
             const nativeTokenSymbol = this.getSystemToken().symbol;
diff --git a/src/antelope/chains/evm/telos-evm/index.ts b/src/antelope/chains/evm/telos-evm/index.ts
index 2d98d7581..06a4538fc 100644
--- a/src/antelope/chains/evm/telos-evm/index.ts
+++ b/src/antelope/chains/evm/telos-evm/index.ts
@@ -50,7 +50,7 @@ const RPC_ENDPOINT = {
     port: 443,
     path: '/evm',
 };
-
+const ESCROW_CONTRACT_ADDRESS = '0x95F5713A1422Aa3FBD3DCB8D553945C128ee3855';
 const API_ENDPOINT = 'https://api.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://teloscan.io';
@@ -102,6 +102,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return W_TOKEN;
     }
 
+    getEscrowContractAddress(): string {
+        return ESCROW_CONTRACT_ADDRESS;
+    }
+
     async getUsdPrice(): Promise<number> {
         if (this.hasIndexerSupport()) {
             const nativeTokenSymbol = this.getSystemToken().symbol;
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 6c4006b34..50198bcd6 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -5,14 +5,47 @@
  * the state of that account in the REX system.
  */
 
+import { ethers } from 'ethers';
 import { defineStore } from 'pinia';
+import { filter } from 'rxjs';
 import {
-    createInitFunction,
+    isTracingAll,
     createTraceFunction,
+    useFeedbackStore,
 } from 'src/antelope/stores/feedback';
+import { AntelopeError, Label } from 'src/antelope/types';
+import { toRaw } from 'vue';
+import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
+import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+
+
+
+export interface EvmRexDeposit {
+    amount: ethers.BigNumber;
+    until: ethers.BigNumber;
+}
+
+export interface RexModel {
+    withdrawable: ethers.BigNumber;
+    balance: ethers.BigNumber;
+    totalStaking: ethers.BigNumber;
+}
+
+export interface NativeRexModel extends RexModel {
+    _: boolean; // dummy property to avoid lint issues
+}
+
+export interface EvmRexModel extends RexModel {
+    withdrawable: ethers.BigNumber;
+    deposits: EvmRexDeposit[];
+    balance: ethers.BigNumber;
+    totalStaking: ethers.BigNumber;
+}
+
 
 export interface RexState {
-    __: string;
+    __rexData: { [label: Label]: RexModel };
 }
 
 const store_name = 'rex';
@@ -20,13 +53,113 @@ const store_name = 'rex';
 export const useRexStore = defineStore(store_name, {
     state: (): RexState => (rexInitialState),
     getters: {
+        getRexData: state => (label: string) => state.__rexData[label] ?? null,
     },
     actions: {
         trace: createTraceFunction(store_name),
-        init: createInitFunction(store_name),
+        init: () => {
+            useFeedbackStore().setDebug(store_name, isTracingAll());
+            getAntelope().events.onAccountChanged.pipe(
+                filter(({ label, account }) => !!label && !!account),
+            ).subscribe({
+                next: async ({ label, account }) => {
+                    if (label === 'current') {
+                        await useRexStore().updateRexDataForAccount(label, toRaw(account));
+                    }
+                },
+            });
+        },
+        async getContractInstance(label: string, address: string) {
+            const authenticator = useAccountStore().getEVMAuthenticator(label);
+            if (!authenticator) {
+                this.trace('getStakedSystemContractInstance', label, '-> no authenticator');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contract = await useEVMStore().getContract(authenticator, address);
+            if (!contract) {
+                this.trace('getStakedSystemContractInstance', label, '-> no contract');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contractInstance = await contract.getContractInstance();
+            return contractInstance;
+        },
+        async getStakedSystemContractInstance(label: string) {
+            const address = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().address;
+            return this.getContractInstance(label, address);
+        },
+        async getEscrowContractInstance(label: string) {
+            const address = (useChainStore().getChain(label).settings as EVMChainSettings).getEscrowContractAddress();
+            return this.getContractInstance(label, address);
+        },
+        async updateTotalStaking(label: string) {
+            this.trace('updateTotalStaking', label);
+            const contract = await this.getStakedSystemContractInstance(label);
+            const totalStaking = await contract.totalAssets();
+            this.setTotalStaking(label, totalStaking);
+        },
+        async updateRexDataForAccount(label: string, account: AccountModel | null) {
+            this.trace('updateRexDataForAccount', label, account);
+            useFeedbackStore().setLoading('updateRexDataForAccount');
+            try {
+                await Promise.all([
+                    this.updateWithdrawable(label),
+                    this.updateDeposits(label),
+                    this.updateBalance(label),
+                    this.updateTotalStaking(label),
+                ]);
+            } catch (error) {
+                console.error(error);
+                useFeedbackStore().unsetLoading('updateRexDataForAccount');
+            }
+        },
+        async updateWithdrawable(label: string) {
+            this.trace('updateWithdrawable', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const withdrawable = await contract.maxWithdraw(address);
+            this.setWithdrawable(label, withdrawable);
+        },
+        async updateDeposits(label: string) {
+            this.trace('updateDeposits', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const deposits = await contract.depositsOf(address);
+            this.setDeposits(label, deposits);
+        },
+        async updateBalance(label: string) {
+            this.trace('updateBalance', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const balance = await contract.balanceOf(address);
+            this.setBalance(label, balance);
+        },
+        // commits ---------------
+        setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(withdrawable, 18));
+            this.trace('setWithdrawable', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).withdrawable = withdrawable;
+        },
+        setDeposits(label: string, deposits: EvmRexDeposit[]) {
+            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, 18))));
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).deposits = deposits;
+        },
+        setBalance(label: string, balance: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(balance, 18));
+            this.trace('setBalance', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).balance = balance;
+        },
+        setTotalStaking(label: string, totalStaking: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(totalStaking, 18));
+            this.trace('setTotalStaking', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).totalStaking = totalStaking;
+        },
     },
 });
 
 const rexInitialState: RexState = {
-    __: '',
+    __rexData: {},
 };
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 65b9bee54..c602a537d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -3,7 +3,7 @@ import { computed, onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
-import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
+import { useUserStore, useBalancesStore, useChainStore, useRexStore } from 'src/antelope';
 import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
@@ -45,9 +45,9 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = ref(systemToken.price.value);
+const systemTokenPrice = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value);
 const stakedFiatValueBn = computed(() => {
-    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value) {
+    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
         return convertCurrency(stakedExpressedInSystemBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
     } else {
@@ -56,12 +56,42 @@ const stakedFiatValueBn = computed(() => {
 });
 
 // Second cell: Unstaking
-const unstakingFiatValueText = ref('$ 200.72');
-const unstakingBalanceBn = ref(stakedTokenBalanceBn);
+const unstakingBalanceBn = computed(() => {
+    const rexData = useRexStore().getRexData(label);
+    if (rexData) {
+        const totalBalance = rexData.balance;
+        const withdrawableBalance = rexData.withdrawable;
+        if (totalBalance && withdrawableBalance) {
+            return totalBalance.sub(withdrawableBalance);
+        } else {
+            return undefined;
+        }
+    } else {
+        return undefined;
+    }
+});
+const unstakingFiatValueBn = computed(() => {
+    if (unstakingBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(unstakingBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const isUnstakingLoading = computed(() => unstakingBalanceBn.value === undefined);
 
 // Third cell: Withdrawable
-const withdrawableFiatValueText = ref('$ 123.02');
-const withdrawableBalanceBn = ref(stakedRatio);
+const withdrawableBalanceBn = computed(() => useRexStore().getRexData(label)?.withdrawable);
+const withdrawableFiatValueBn = computed(() => {
+    if (withdrawableBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(withdrawableBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const isWithdrawableLoading = computed(() => withdrawableBalanceBn.value === undefined);
+
 
 const apyPrittyPrint = computed(() => {
     const apy = chainStore.currentEvmChain?.apy;
@@ -75,8 +105,15 @@ const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref('10 days');
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
-const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
-const evmNetworkName = ref('Telos EVM');
+const tvlAmountBn = computed(() => {
+    const totalStaking = useRexStore().getRexData(label)?.totalStaking;
+    if (totalStaking) {
+        return totalStaking;
+    } else {
+        return undefined;
+    }
+});
+const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
 const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
@@ -89,16 +126,18 @@ const firstLineData = computed(() => [{
 }, {
     label: $t('evm_stake.unstaking_card_label'),
     tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
-    primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
+    primaryText: prettyPrintToken(unstakingFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isUnstakingLoading.value ? '' : prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
+    isPrimaryLoading: isUnstakingLoading.value,
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.withdrawable_card_label'),
     tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
-    primaryText: withdrawableFiatValueText.value,
-    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
+    primaryText: prettyPrintToken(withdrawableFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isWithdrawableLoading.value ? '' : prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
+    isPrimaryLoading: isWithdrawableLoading.value,
     useSmallBox: true,
 }]);
 

From 8ba6984fc5202b8ba1b13a2f022a5bcb75826ef2 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 10:19:53 -0300
Subject: [PATCH 068/268] addressing feedback

---
 src/antelope/chains/EVMChainSettings.ts     | 18 ++++++++++++
 src/components/evm/ScrollableInfoCards.vue  |  6 +++-
 src/i18n/en-us/index.js                     |  7 +++--
 src/pages/evm/staking/StakingPageHeader.vue | 32 ++++++++++-----------
 4 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index b406f0d5d..d09580c80 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -364,6 +364,14 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return `${token.symbol}-${token.address}-${this.getNetwork()}`;
     }
 
+    /**
+     * This method returns the cached value for the requested contract which can be one of three values:
+     * - Promise<EvmContract> if the contract is already cached
+     * - Promise<null> if the contract was never requested before
+     * - Promise<false> if the contract was requested, not found and set as not existing (to avoid requesting it again)
+     * @param address contract requested
+     * @returns Promise for the requested contract or false if it doesn't exist
+     */
     async getContract(address: string): Promise<EvmContract | false | null> {
         const key = address.toLowerCase();
         const returnValue = this.contracts[key]?.promise ?? null;
@@ -378,6 +386,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return returnValue;
     }
 
+    /**
+     * This method adds a contract to the cache and resolves the promise for it
+     * @param address address of the contract
+     * @param contract contract instance to be cached
+     */
     addContract(address: string, contract: EvmContract) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
@@ -393,6 +406,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
         }
     }
 
+    /**
+     * This method sets a contract as not existing and resolves the promise to false for it.
+     * This is done to distinguish between a contract that was never requested before and one that was requested and not found.
+     * @param address address of the contract
+     */
     setContractAsNotExisting(address: string) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 2285e02cd..d05e600b5 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -26,7 +26,7 @@ const props = defineProps<{
         }"
     >
         <div class="c-scrollable-info-cards__card-header">
-            <h5 class="u-text--low-contrast">
+            <h5 class="c-scrollable-info-cards__card-header-label u-text--low-contrast">
                 {{ card.label }}
             </h5>
 
@@ -110,5 +110,9 @@ const props = defineProps<{
         justify-content: space-between;
         margin-bottom: 4px;
     }
+
+    &__card-header-label {
+        white-space: nowrap;
+    }
 }
 </style>
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index d54e6ffba..161bacbd4 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -190,7 +190,7 @@ export default {
         unwrap_input_label: 'Unwrapping Amount',
     },
     evm_stake: {
-        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdrawable {token}',
         staked_card_label: 'Staked {symbol}',
         staked_card_tooltip: 'Staked tokens:\n\n' +
         'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
@@ -201,8 +201,8 @@ export default {
         'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
-        withdrawable_card_label: 'Withdraw-able',
-        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        withdrawable_card_label: 'withdrawable',
+        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
@@ -220,6 +220,7 @@ export default {
         tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
         'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
+        unstaking_period: '10 days',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index c602a537d..972d3e6b9 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -17,9 +17,6 @@ const userStore = useUserStore();
 const balancesStore = useBalancesStore();
 const chainStore = useChainStore();
 const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
-// data
-const loading = ref(true);
-
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
@@ -27,7 +24,6 @@ const fiatCurrency = computed(() => userStore.fiatCurrency);
 const systemToken = chainSettings.getSystemToken();
 const stakedToken = chainSettings.getStakedSystemToken();
 
-const totalFiatValueText = ref('$ 4,324.35');
 
 // First cell: Staked
 const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
@@ -102,7 +98,7 @@ const apyPrittyPrint = computed(() => {
     }
 });
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
-const unlockPeriod = ref('10 days');
+const unlockPeriod = ref($t('evm_stake.unstaking_period'));
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
 const tvlAmountBn = computed(() => {
@@ -115,6 +111,14 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
+// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
+const totalFiatValueBn = computed(() => {
+    const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
+    const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
+    const withdrawableFiatValue = withdrawableFiatValueBn.value ?? BigNumber.from(0);
+    return stakedFiatValue.add(unstakingFiatValue).add(withdrawableFiatValue);
+});
+
 const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
     tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
@@ -162,20 +166,14 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
-
-// methods
-onBeforeMount(() => {
-    chainSettings.getUsdPrice().then((price) => {
-        // systemTokenPrice.value = price;
-    }).finally(() => {
-        loading.value = false;
-    });
-});
-
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
+    let decimals = symbol === fiatCurrency.value ? 2 : 4;
+    if (!amount || amount.isZero()) {
+        decimals = 1;
+    }
     return prettyPrintCurrency(
         amount ?? BigNumber.from(0),
-        4,
+        decimals,
         fiatLocale.value,
         false,
         symbol,
@@ -189,7 +187,7 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 <div class="c-staking-header">
     <div class="text-center q-mb-xl">
         <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
-        <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
+        <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
     <div>{{ stakedTokenBalanceBn?.toString() }}</div>

From 80da51d978cf4b297b056382d97e29550d394fbc Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 14:17:28 -0300
Subject: [PATCH 069/268] merging two functions into one

---
 src/antelope/chains/EVMChainSettings.ts | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index d09580c80..e229a303c 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -391,7 +391,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      * @param contract contract instance to be cached
      */
-    addContract(address: string, contract: EvmContract) {
+    addContract(address: string, contract: EvmContract | false) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
             this.contracts[key] = {
@@ -412,18 +412,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      */
     setContractAsNotExisting(address: string) {
-        const key = address.toLowerCase();
-        if (!this.contracts[key]) {
-            this.contracts[key] = {
-                promise: Promise.resolve(false),
-            };
-        } else {
-            if (this.contracts[key].resolve) {
-                this.contracts[key].resolve?.(false);
-            } else {
-                console.error('Error: Contract already exists', address);
-            }
-        }
+        return this.addContract(address, false);
     }
 
     async getEVMTransactions(filter: IndexerTransactionsFilter): Promise<IndexerAccountTransactionsResponse> {

From 80ca6bf0d32f2cda22dda4eb871d0a0adfceca6c Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 11:25:05 -0300
Subject: [PATCH 070/268] addressing Erza's feedback

---
 src/antelope/chains/EVMChainSettings.ts     |  5 +-
 src/antelope/stores/chain.ts                |  6 +-
 src/antelope/stores/rex.ts                  | 62 ++++++++++++++++++---
 src/antelope/stores/utils/currency-utils.ts |  5 +-
 src/antelope/types/TokenClass.ts            |  6 +-
 src/pages/evm/staking/StakingPageHeader.vue | 19 +++++--
 src/pages/evm/wallet/SendPage.vue           | 10 ++--
 7 files changed, 88 insertions(+), 25 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index e229a303c..504cc0ca7 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -28,6 +28,7 @@ import { ethers } from 'ethers';
 import { toStringNumber } from 'src/antelope/stores/utils/currency-utils';
 import { dateIsWithinXMinutes } from 'src/antelope/stores/utils/date-utils';
 import { getAntelope } from 'src/antelope';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 
 export default abstract class EVMChainSettings implements ChainSettings {
@@ -525,10 +526,10 @@ export default abstract class EVMChainSettings implements ChainSettings {
     async getEstimatedGas(limit: number): Promise<{ system:ethers.BigNumber, fiat:ethers.BigNumber }> {
         const gasPrice: ethers.BigNumber = await this.getGasPrice();
         const tokenPrice: number = await this.getUsdPrice();
-        const price = ethers.utils.parseUnits(toStringNumber(tokenPrice), 18);
+        const price = ethers.utils.parseUnits(toStringNumber(tokenPrice), WEI_PRECISION);
         const system = gasPrice.mul(limit);
         const fiatDouble = system.mul(price);
-        const fiat = fiatDouble.div(ethers.utils.parseUnits('1', 18));
+        const fiat = fiatDouble.div(ethers.utils.parseUnits('1', WEI_PRECISION));
         return { system, fiat };
     }
     async getLatestBlock(): Promise<ethers.BigNumber> {
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 66eb3d516..349379436 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -279,12 +279,14 @@ export const useChainStore = defineStore(store_name, {
             }
         },
         setStakedRatio(label: string, ratio: ethers.BigNumber) {
-            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            const decimals = (this.getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
             this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
         },
         setUnstakedRatio(label: string, ratio: ethers.BigNumber) {
-            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            const decimals = (this.getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
             this.trace('setUnstakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).unstakeRatio = ratio;
         },
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 50198bcd6..f154ed6fd 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -18,6 +18,7 @@ import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
 import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 
 
@@ -69,6 +70,12 @@ export const useRexStore = defineStore(store_name, {
                 },
             });
         },
+        /**
+         * auxiliar method to get a contract instance. Only used internally.
+         * @param label identifies the context (network on this case) for the data
+         * @param address the contract address
+         * @returns the contract instance
+         */
         async getContractInstance(label: string, address: string) {
             const authenticator = useAccountStore().getEVMAuthenticator(label);
             if (!authenticator) {
@@ -83,35 +90,60 @@ export const useRexStore = defineStore(store_name, {
             const contractInstance = await contract.getContractInstance();
             return contractInstance;
         },
+        /**
+         * auxiliar method to get the staked system contract instance
+         * @param label identifies the context (network on this case) for the data
+         * @returns the contract instance
+         */
         async getStakedSystemContractInstance(label: string) {
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().address;
             return this.getContractInstance(label, address);
         },
+        /**
+         * auxiliar method to get the escrow contract instance
+         * @param label identifies the context (network on this case) for the data
+         * @returns the contract instance
+         */
         async getEscrowContractInstance(label: string) {
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getEscrowContractAddress();
             return this.getContractInstance(label, address);
         },
+        /**
+         * This method queries the total amount of staked tokens in the system and maintains it in the store.
+         * @param label identifies the context (network on this case) for the data
+         */
         async updateTotalStaking(label: string) {
             this.trace('updateTotalStaking', label);
             const contract = await this.getStakedSystemContractInstance(label);
             const totalStaking = await contract.totalAssets();
             this.setTotalStaking(label, totalStaking);
         },
+        /**
+         * This method shopuld be called to quiery the REX data for a given account,
+         * along with the current stato of the total staked tokens on the system.
+         * @param label identifies the context (network on this case) for the data
+         * @param account the account to update the data for
+         */
         async updateRexDataForAccount(label: string, account: AccountModel | null) {
             this.trace('updateRexDataForAccount', label, account);
             useFeedbackStore().setLoading('updateRexDataForAccount');
             try {
                 await Promise.all([
-                    this.updateWithdrawable(label),
-                    this.updateDeposits(label),
-                    this.updateBalance(label),
-                    this.updateTotalStaking(label),
+                    this.updateWithdrawable(label),  // account's data
+                    this.updateDeposits(label),      // account's data
+                    this.updateBalance(label),       // account's data
+                    this.updateTotalStaking(label),  // system's data
                 ]);
             } catch (error) {
                 console.error(error);
                 useFeedbackStore().unsetLoading('updateRexDataForAccount');
             }
         },
+        /**
+         * This method queries the withdrawable amount for a given account and maintains it in the store.
+         * The withdrawable amount is the amount of tokens that can be withdrawn from the REX system right now.
+         * @param label identifies the context (account-network) for the data
+         */
         async updateWithdrawable(label: string) {
             this.trace('updateWithdrawable', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -119,6 +151,12 @@ export const useRexStore = defineStore(store_name, {
             const withdrawable = await contract.maxWithdraw(address);
             this.setWithdrawable(label, withdrawable);
         },
+        /**
+         * This method queries the deposits for a given account and maintains it in the store.
+         * The deposits contains a list of individual whitdrawls attempts, each with an amount and a date.
+         * If the date is in the future, the amount is not available for withdrawal yet.
+         * @param label identifies the context (account-network) for the data
+         */
         async updateDeposits(label: string) {
             this.trace('updateDeposits', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -126,6 +164,11 @@ export const useRexStore = defineStore(store_name, {
             const deposits = await contract.depositsOf(address);
             this.setDeposits(label, deposits);
         },
+        /**
+         * This method queries the balance for a given account and maintains it in the store.
+         * The account's balance is the sum of all the deposits (withdrawable or not)
+         * @param label identifies the context (account-network) for the data
+         */
         async updateBalance(label: string) {
             this.trace('updateBalance', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -133,26 +176,29 @@ export const useRexStore = defineStore(store_name, {
             const balance = await contract.balanceOf(address);
             this.setBalance(label, balance);
         },
+        getStakingDecimals() {
+            return useChainStore().currentEvmChain?.settings.getStakedSystemToken().decimals || WEI_PRECISION;
+        },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(withdrawable, 18));
+            const num = parseFloat(ethers.utils.formatUnits(withdrawable, this.getStakingDecimals()));
             this.trace('setWithdrawable', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).withdrawable = withdrawable;
         },
         setDeposits(label: string, deposits: EvmRexDeposit[]) {
-            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, 18))));
+            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, this.getStakingDecimals()))));
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).deposits = deposits;
         },
         setBalance(label: string, balance: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(balance, 18));
+            const num = parseFloat(ethers.utils.formatUnits(balance, this.getStakingDecimals()));
             this.trace('setBalance', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).balance = balance;
         },
         setTotalStaking(label: string, totalStaking: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(totalStaking, 18));
+            const num = parseFloat(ethers.utils.formatUnits(totalStaking, this.getStakingDecimals()));
             this.trace('setTotalStaking', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).totalStaking = totalStaking;
diff --git a/src/antelope/stores/utils/currency-utils.ts b/src/antelope/stores/utils/currency-utils.ts
index 5da419231..5c6998d8e 100644
--- a/src/antelope/stores/utils/currency-utils.ts
+++ b/src/antelope/stores/utils/currency-utils.ts
@@ -2,6 +2,7 @@ import { BigNumber } from 'ethers';
 import { parseUnits } from 'ethers/lib/utils';
 import { formatUnits } from '@ethersproject/units';
 import Decimal from 'decimal.js';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 /**
  * Given a number or string, returns a string representation of the number with up to 18 decimal places
@@ -14,7 +15,7 @@ export function toStringNumber(value: number | string): string {
         return value;
     } else if (typeof value === 'number') {
         const num = new Decimal(value);
-        return num.toFixed(18);
+        return num.toFixed(WEI_PRECISION);
     } else {
         throw new Error('Invalid value type: ' + typeof value);
     }
@@ -309,7 +310,7 @@ export function getFloatReciprocal(float: number | string) {
 
     return new Decimal(1)
         .dividedBy(float)
-        .toFixed(18)
+        .toFixed(WEI_PRECISION)
         .replace(trailingZeroesRegex, '')
         .replace(trailingDotRegex, '');
 }
diff --git a/src/antelope/types/TokenClass.ts b/src/antelope/types/TokenClass.ts
index 7d372a7d0..54f048872 100644
--- a/src/antelope/types/TokenClass.ts
+++ b/src/antelope/types/TokenClass.ts
@@ -1,5 +1,5 @@
 import { ethers } from 'ethers';
-import { formatWei } from 'src/antelope/stores/utils';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
 import { toStringNumber } from 'src/antelope/stores/utils/currency-utils';
 
 export const TOKEN_PRICE_DECIMALS = 18;
@@ -89,7 +89,7 @@ export class TokenPrice {
     }
 
     get decimals(): number {
-        return this.market?.info.decimals || 18;
+        return this.market?.info.decimals || TOKEN_PRICE_DECIMALS;
     }
 
     // Returns the token price as BigNumber
@@ -193,7 +193,7 @@ export class TokenClass implements TokenSourceInfo {
         this.chainId = sourceInfo.chainId;
         this.network = sourceInfo.network;
         this.name = sourceInfo.name;
-        this.decimals = sourceInfo.decimals ?? sourceInfo.precision ?? 18;
+        this.decimals = sourceInfo.decimals ?? sourceInfo.precision ?? WEI_PRECISION;
         this.isSystem = sourceInfo.isSystem;
         this.isNative = sourceInfo.isNative;
         this.logo = sourceInfo.logo ?? sourceInfo.logoURI;
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 972d3e6b9..6d2d5bd62 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
@@ -41,7 +41,7 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value);
+const systemTokenPrice = ref(undefined as BigNumber | undefined);
 const stakedFiatValueBn = computed(() => {
     if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
@@ -51,6 +51,19 @@ const stakedFiatValueBn = computed(() => {
     }
 });
 
+// watch the balances store to update the staked token balance and the system token price
+watch(() => balancesStore.getBalances(label), (balances) => {
+    const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
+    if (stakedTokenBalance) {
+        stakedTokenBalanceBn.value = stakedTokenBalance;
+    }
+    const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
+    if (systemTokenPriceBalance) {
+        systemTokenPrice.value = systemTokenPriceBalance;
+    }
+});
+
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);
@@ -100,7 +113,6 @@ const apyPrittyPrint = computed(() => {
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref($t('evm_stake.unstaking_period'));
 
-// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
 const tvlAmountBn = computed(() => {
     const totalStaking = useRexStore().getRexData(label)?.totalStaking;
     if (totalStaking) {
@@ -111,7 +123,6 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
-// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
 const totalFiatValueBn = computed(() => {
     const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
     const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
diff --git a/src/pages/evm/wallet/SendPage.vue b/src/pages/evm/wallet/SendPage.vue
index 9aae9d0e0..8eea51320 100644
--- a/src/pages/evm/wallet/SendPage.vue
+++ b/src/pages/evm/wallet/SendPage.vue
@@ -4,7 +4,7 @@ import AppPage from 'components/evm/AppPage.vue';
 import UserInfo from 'components/evm/UserInfo.vue';
 import { getAntelope, useAccountStore, useChainStore, useUserStore } from 'src/antelope';
 import { TransactionResponse, TokenClass, TokenBalance, NativeCurrencyAddress, AntelopeError } from 'src/antelope/types';
-import { formatWei, prettyPrintBalance, prettyPrintFiatBalance } from 'src/antelope/stores/utils';
+import { WEI_PRECISION, formatWei, prettyPrintBalance, prettyPrintFiatBalance } from 'src/antelope/stores/utils';
 import { BigNumber, ethers } from 'ethers';
 import CurrencyInput from 'components/evm/inputs/CurrencyInput.vue';
 import AddressInput from 'components/evm/inputs/AddressInput.vue';
@@ -103,11 +103,13 @@ export default defineComponent({
         },
         gasFeeInSystemSym() {
             const symbol = chainStore.loggedChain.settings.getSystemToken().symbol;
-            const gas = `${formatWei(this.estimatedGas.system, 18, 18)}`;
+            const decimals = chainStore.loggedChain.settings.getSystemToken().decimals;
+            const gas = `${formatWei(this.estimatedGas.system, decimals, WEI_PRECISION)}`;
             return prettyPrintBalance(gas, userStore.fiatLocale, this.isMobile, symbol);
         },
         gasFeeInFiat() {
-            const gasFiat = `${formatWei(this.estimatedGas.fiat, 18, 18)}`;
+            const decimals = chainStore.loggedChain.settings.getSystemToken().decimals;
+            const gasFiat = `${formatWei(this.estimatedGas.fiat, decimals, WEI_PRECISION)}`;
             return prettyPrintFiatBalance(gasFiat, userStore.fiatLocale, this.isMobile, userStore.fiatCurrency);
         },
         isMobile(): boolean {
@@ -247,7 +249,7 @@ 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, 18)} ${token.symbol}`;
+                        const quantity = `${formatWei(amount, token.decimals, WEI_PRECISION)} ${token.symbol}`;
                         const address = to.substring(0, 6) + '...' + to.substring(to.length - 4, to.length);
                         const dismiss = ant.config.notifyNeutralMessageHandler(
                             this.$t('notification.neutral_message_sending', { quantity, address }),

From 284cf03dac1cd0289bbbdc86d81b4b3211c72fe7 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Tue, 29 Aug 2023 17:30:08 -0400
Subject: [PATCH 071/268] fix capitalization

---
 src/i18n/en-us/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 161bacbd4..ba57fa046 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -202,7 +202,7 @@ export default {
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
         withdrawable_card_label: 'withdrawable',
-        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
+        withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',

From 2298b57917174d8395bf5cc165d9032261c4db3a Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 14:07:23 -0300
Subject: [PATCH 072/268] rebasing with source branch

---
 src/antelope/stores/balances.ts             | 23 +++++++++++++++++++++
 src/antelope/stores/chain.ts                |  2 +-
 src/i18n/en-us/index.js                     |  6 ++----
 src/pages/evm/staking/StakingPageHeader.vue | 17 +++++----------
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index fab027d9e..74d6be5b3 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -50,6 +50,7 @@ import {
 import { AccountModel, EvmAccountModel } from 'src/antelope/stores/account';
 import { EVMAuthenticator } from 'src/antelope/wallets';
 import { filter } from 'rxjs';
+import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
 
 export interface BalancesState {
     __balances:  { [label: Label]: TokenBalance[] };
@@ -181,6 +182,7 @@ export const useBalancesStore = defineStore(store_name, {
                 const chain_settings = chain.getChain(label).settings as EVMChainSettings;
                 const sysToken = chain_settings.getSystemToken();
                 const wrpToken = chain_settings.getWrappedSystemToken();
+                const stkToken = chain_settings.getStakedSystemToken();
 
                 // get the price for both system and wrapped tokens
                 const price = (await chain_settings.getUsdPrice()).toString();
@@ -188,6 +190,27 @@ export const useBalancesStore = defineStore(store_name, {
                 sysToken.market = new TokenMarketData(marketInfo);
                 wrpToken.market = new TokenMarketData(marketInfo);
 
+                // Now we preview a deposit of 1 SYS to get the ratio
+                const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
+
+                const ratio:BigNumber = await chain.getStakedRatio(label);
+                const ratioNumber = ethers.utils.formatUnits(ratio, stkToken.decimals);
+
+                // only if the ratio is not zero, we update the STK token price
+                if (!ratio.isZero() && !ratio.isNegative()) {
+
+                    // Now we calculate the price of 1 STK = (price of 1 SYS) / ratio
+                    const stkPrice = convertCurrency(oneSys, sysToken.decimals, stkToken.decimals, ratioNumber);
+                    const stkPriceNumber = ethers.utils.formatUnits(stkPrice, sysToken.decimals);
+
+                    // Finally we update the STK token price
+                    const stkMarketInfo = { price:stkPriceNumber } as MarketSourceInfo;
+                    // TODO: this is removed until we decide what to do whith the STK token price
+                    // https://github.com/telosnetwork/telos-wallet/issues/544
+                    // stkToken.market = new TokenMarketData(stkMarketInfo);
+                    this.trace('updateSystemTokensPrices', `STLOS price: ${toRaw(stkMarketInfo)}`);
+                }
+
             } catch (error) {
                 console.error(error);
                 // we won't thorw an error here, as it is not critical
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 349379436..2893b2d03 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -194,7 +194,7 @@ export const useChainStore = defineStore(store_name, {
             // Now we preview a deposit of 1 SYS to get the ratio
             const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
             const stakedRatio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
-            const unstakedRatio:ethers.BigNumber = await contractInstance.previewWithdraw(oneSys);
+            const unstakedRatio:ethers.BigNumber = await contractInstance.previewRedeem(oneSys);
 
             // Finally we update the store
             this.setStakedRatio(label, stakedRatio);
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index ba57fa046..e1cafff7b 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 6d2d5bd62..97b34369d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -26,16 +26,12 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
-const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
-const stakedRatio = computed(() => chainStore.getStakedRatio(label));
-const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
+const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
+const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
-    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
-        console.log('stakedRatio', stakedRatio.value.toString());
-        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
-        console.log('inverseRatio', inverseRatio.toString());
-        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
-        console.log('ratioNumber', ratioNumber);
+    if (stakedTokenBalanceBn.value && !unstakedRatio.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(unstakedRatio.value, stakedToken.decimals);
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -201,9 +197,6 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
-    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
-    <div>{{ stakedRatio?.toString() }}</div>
-
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 20457c03515f2149d1d961eb4c0da1e775eaee34 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 073/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index e1cafff7b..ba57fa046 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },

From 8192ca6e0480aecce6f3459ace70126c97da57af Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 23 Aug 2023 14:01:24 -0300
Subject: [PATCH 074/268] saving WIP

---
 src/pages/evm/staking/StakingPageHeader.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 97b34369d..ef43bcd68 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -26,12 +26,25 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
+<<<<<<< HEAD
 const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
     if (stakedTokenBalanceBn.value && !unstakedRatio.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(unstakedRatio.value, stakedToken.decimals);
+=======
+const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
+const stakedExpressedInSystemBalanceBn = computed(() => {
+    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
+        console.log('stakedRatio', stakedRatio.value.toString());
+        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
+        console.log('inverseRatio', inverseRatio.toString());
+        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
+        console.log('ratioNumber', ratioNumber);
+>>>>>>> 8c4d4930 (saving WIP)
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -197,6 +210,9 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
+    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
+    <div>{{ stakedRatio?.toString() }}</div>
+
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From f399c2f943907eaf715d67f3f5d9e82f0aa7d2d0 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 24 Aug 2023 20:00:04 -0300
Subject: [PATCH 075/268] Fetching real Rex data for the staking page header

---
 src/pages/evm/staking/StakingPageHeader.vue | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index ef43bcd68..b3ae8c745 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -26,25 +26,12 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
-<<<<<<< HEAD
 const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
     if (stakedTokenBalanceBn.value && !unstakedRatio.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(unstakedRatio.value, stakedToken.decimals);
-=======
-const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
-const stakedRatio = computed(() => chainStore.getStakedRatio(label));
-const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
-const stakedExpressedInSystemBalanceBn = computed(() => {
-    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
-        console.log('stakedRatio', stakedRatio.value.toString());
-        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
-        console.log('inverseRatio', inverseRatio.toString());
-        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
-        console.log('ratioNumber', ratioNumber);
->>>>>>> 8c4d4930 (saving WIP)
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;

From ecea03afe3d2fd5fc5ec2e326b26fe9392ffcc95 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 01:03:55 -0300
Subject: [PATCH 076/268] avoiding infinite loading

---
 src/pages/evm/staking/StakingPageHeader.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index b3ae8c745..d50334e40 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -46,8 +46,6 @@ const stakedFiatValueBn = computed(() => {
         return undefined;
     }
 });
-
-// watch the balances store to update the staked token balance and the system token price
 watch(() => balancesStore.getBalances(label), (balances) => {
     const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
     if (stakedTokenBalance) {

From 3679adb13565878a7bd457ba3da87237c83f0cbe Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 21:45:15 -0300
Subject: [PATCH 077/268] rebase source branch

---
 src/pages/evm/staking/StakingPageHeader.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index d50334e40..fa961e52f 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -195,9 +195,6 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
-    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
-    <div>{{ stakedRatio?.toString() }}</div>
-
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From c7e040c5d7d1436c1dd4c4880fc3315c2391beb4 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 21:51:04 -0300
Subject: [PATCH 078/268] cleaning unused imports

---
 src/pages/evm/staking/StakingPageHeader.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 2a917bba3..b0599c550 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
 import { useUserStore, useBalancesStore, useChainStore, useRexStore } from 'src/antelope';
 import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
-import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
-import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 
-const router = useRouter();
 const route = useRoute();
 
 const label = 'current';

From 2a8aadba753dd2ca2d6e4652df245143a85e36c2 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 22:03:46 -0300
Subject: [PATCH 079/268] avoiding infinite loading by forcing updates

---
 src/antelope/stores/balances.ts             |  7 +++
 src/antelope/stores/rex.ts                  | 11 ++++
 src/pages/evm/staking/StakingPageHeader.vue | 63 ++++++++++++++++++---
 3 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 74d6be5b3..a608cbc42 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -86,6 +86,13 @@ export const useBalancesStore = defineStore(store_name, {
                 await useBalancesStore().updateBalancesForAccount('current', useAccountStore().loggedAccount);
             }, 10000);
         },
+        async updateBalances(label: string) {
+            this.trace('updateBalances', label);
+            const account = useAccountStore().getAccount(label);
+            if (account) {
+                await this.updateBalancesForAccount(label, account);
+            }
+        },
         async updateBalancesForAccount(label: string, account: AccountModel | null) {
             this.trace('updateBalancesForAccount', label, account);
             try {
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index f154ed6fd..20964d5ff 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -118,6 +118,17 @@ export const useRexStore = defineStore(store_name, {
             const totalStaking = await contract.totalAssets();
             this.setTotalStaking(label, totalStaking);
         },
+        /**
+         * This method should be called to update the REX data for a given context.
+         * @param label identifies the context (account and network) for the data
+         */
+        async updateRexData(label: string) {
+            this.trace('updateRexData', label);
+            const account = useAccountStore().getAccount(label);
+            if (account) {
+                await this.updateRexDataForAccount(label, account);
+            }
+        },
         /**
          * This method shopuld be called to quiery the REX data for a given account,
          * along with the current stato of the total staked tokens on the system.
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index fa961e52f..b0599c550 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
 import { useUserStore, useBalancesStore, useChainStore, useRexStore } from 'src/antelope';
 import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
-import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
-import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 
 const label = 'current';
 const { t: $t } = useI18n();
@@ -26,7 +28,6 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
-const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
@@ -37,7 +38,6 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = ref(undefined as BigNumber | undefined);
 const stakedFiatValueBn = computed(() => {
     if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
@@ -46,18 +46,27 @@ const stakedFiatValueBn = computed(() => {
         return undefined;
     }
 });
-watch(() => balancesStore.getBalances(label), (balances) => {
+const stakedTokenBalanceBn = computed(() => {
+    const balances = balancesStore.getBalances(label);
     const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
     if (stakedTokenBalance) {
-        stakedTokenBalanceBn.value = stakedTokenBalance;
+        return stakedTokenBalance;
+    } else {
+        return undefined;
     }
+});
+const systemTokenPrice = computed(() => {
+    const balances = balancesStore.getBalances(label);
     const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
     if (systemTokenPriceBalance) {
-        systemTokenPrice.value = systemTokenPriceBalance;
+        return systemTokenPriceBalance;
+    } else {
+        return undefined;
     }
 });
 
 
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);
@@ -171,6 +180,44 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
+// creatmos un interval que cada 5 segundos verifique si cada uno de los loadings es true o false.
+// por cada loading que encontremos en true, debemos llamar a actualizar las dependendicas de ese loading
+// si todos los loadings son false, entonces podemos parar el intervalo
+
+const intervalTimer = setInterval(() => {
+
+    // is staking still loading?
+    if (isStakedLoading.value) {
+        // if staked balance is still undefined we force the balances update
+        if (stakedTokenBalanceBn.value === undefined) {
+            balancesStore.updateBalances(label);
+        }
+        // if unstaked ratio is still zero we force the chain update
+        if (unstakedRatio.value.isZero()) {
+            chainStore.updateStakedRatio(label);
+        }
+    }
+    // is unstaking still loading?
+    if (isUnstakingLoading.value || isWithdrawableLoading.value) {
+        // we need to update rex data
+        useRexStore().updateRexData(label);
+    }
+    if (apyisLoading.value) {
+        // force apy update
+        chainStore.updateApy(label);
+    }
+
+    if (
+        // we are not in the staking page or...
+        route.path !== '/evm/staking' ||
+        // all loadings are false at the same time
+        (!isStakedLoading.value && !isUnstakingLoading.value && !isWithdrawableLoading.value && !apyisLoading.value)
+    ) {
+        clearInterval(intervalTimer);
+    } else {
+    }
+}, 5000);
+
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
     let decimals = symbol === fiatCurrency.value ? 2 : 4;
     if (!amount || amount.isZero()) {

From 1d1b4d0133e48b25c57ac7893d7e11ee67812878 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 19:38:17 -0300
Subject: [PATCH 080/268] save WIP - staking tab

---
 src/antelope/stores/rex.ts                  |  13 +-
 src/components/ConversionRateBadge.vue      |   7 +-
 src/components/evm/inputs/CurrencyInput.vue |  14 +-
 src/i18n/en-us/index.js                     |   9 +
 src/pages/evm/staking/StakingPage.vue       |   3 +-
 src/pages/evm/staking/StakingPageHeader.vue |   1 +
 src/pages/evm/staking/StakingTab.vue        | 264 ++++++++++++++++++++
 src/pages/evm/wrap/UnwrapTab.vue            |   1 +
 src/pages/evm/wrap/WrapTab.vue              |   1 +
 9 files changed, 302 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/evm/staking/StakingTab.vue

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 20964d5ff..39dbb148a 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -13,7 +13,7 @@ import {
     createTraceFunction,
     useFeedbackStore,
 } from 'src/antelope/stores/feedback';
-import { AntelopeError, Label } from 'src/antelope/types';
+import { AntelopeError, Label, TransactionResponse } from 'src/antelope/types';
 import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
 import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
@@ -187,9 +187,20 @@ export const useRexStore = defineStore(store_name, {
             const balance = await contract.balanceOf(address);
             this.setBalance(label, balance);
         },
+        /**
+         * utility method to get the number of decimals for the staked system token
+         * @returns the number of decimals for the staked system token
+         */
         getStakingDecimals() {
             return useChainStore().currentEvmChain?.settings.getStakedSystemToken().decimals || WEI_PRECISION;
         },
+        // transactions ----------
+        async stakeSystemTokens(label: string, amount: ethers.BigNumber): Promise<TransactionResponse> {
+            // TODO: implement
+            console.error('stakeSystemTokens not implemented yet');
+            this.trace('stakeSystemTokens', label, amount);
+            return {} as TransactionResponse;
+        },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
             const num = parseFloat(ethers.utils.formatUnits(withdrawable, this.getStakingDecimals()));
diff --git a/src/components/ConversionRateBadge.vue b/src/components/ConversionRateBadge.vue
index 4b35ef743..b74f4fc75 100644
--- a/src/components/ConversionRateBadge.vue
+++ b/src/components/ConversionRateBadge.vue
@@ -11,17 +11,20 @@ const props = defineProps<{
     tokenTwoSymbol: string;
     tokenTwoAmount: BigNumber; // the amount of token two in a single token one
     tokenTwoDecimals: number; // the number of decimals in token two, e.g. 18 for ETH
+    decimals: number; // abbreviate should be false in order to display decimals
 }>();
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
 
 const label = computed(() => {
+    console.log('label computed: ', props.tokenOneSymbol, props.tokenTwoSymbol, props.tokenTwoAmount.toString(), fiatLocale.value, props.tokenTwoDecimals);
+    const abbreviate = props.decimals === 0;
     const prettyTokenTwoAmount = prettyPrintCurrency(
         props.tokenTwoAmount,
-        4,
+        props.decimals ?? 2,
         fiatLocale.value,
-        true,
+        abbreviate,
         props.tokenTwoSymbol,
         false,
         props.tokenTwoDecimals,
diff --git a/src/components/evm/inputs/CurrencyInput.vue b/src/components/evm/inputs/CurrencyInput.vue
index 793c57f81..bb8e82b80 100644
--- a/src/components/evm/inputs/CurrencyInput.vue
+++ b/src/components/evm/inputs/CurrencyInput.vue
@@ -328,12 +328,12 @@ export default defineComponent({
         },
 
         primaryCurrencyDisplayPrecision() {
-            // if the value represents fiat, show 2 decimals; else show 4
-            return this.decimals === 2 ? 2 : 4;
+            // if the value represents fiat, show 2 decimals; else show this.decimalsToDisplay
+            return this.decimals === 2 ? 2 : this.decimalsToDisplay;
         },
         secondaryCurrencyDisplayPrecision() {
-            // if the value represents fiat, show 2 decimals; else show 4
-            return this.secondaryCurrencyDecimals === 2 ? 2 : 4;
+            // if the value represents fiat, show 2 decimals; else show this.decimalsToDisplay
+            return this.secondaryCurrencyDecimals === 2 ? 2 : this.decimalsToDisplay;
         },
         leadingZeroesRegex(): RegExp {
             const leadingZeroesPattern = `^0+(?!$|\\${this.decimalSeparator})`;
@@ -427,7 +427,7 @@ export default defineComponent({
                             true,
                         );
                     } else {
-                        const decimalsToShow = formatUnits(newValue, this.decimals).split('.')[1].length;
+                        const decimalsToShow = this.decimalsToDisplay;
                         newInputValue = prettyPrintCurrency(
                             newValue,
                             decimalsToShow,
@@ -937,9 +937,9 @@ export default defineComponent({
 
 <template>
 <div
-    :id="$attrs.id"
+    :id="($attrs.id as string)"
     :class="{
-        [$attrs.class]: !!$attrs.class,
+        [$attrs.class as string]: !!$attrs.class,
         'c-currency-input': true,
         'c-currency-input--error': !!visibleErrorText,
         'c-currency-input--readonly': !!inputElementAttrs.readonly,
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index ba57fa046..ee4a94f07 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -221,6 +221,15 @@ export default {
         'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
+        stake_input_label: 'Staking Amount',
+        stake: 'Stake',
+        stake_button_label: 'Stake {systemSymbol} to {stakedSymbol}',
+        stake_sidebar_title: 'Why stake {symbol}?',
+        stake_sidebar_content_fragment_1: 'Staking your TLOS to sTLOS grants you access to',
+        stake_sidebar_content_fragment_2_bold: ' continuous rewards ',
+        stake_sidebar_content_fragment_3: 'and various DeFi applications, further increasing yield. As the reward pool increases, the TLOS to sTLOS conversion rate will change over time. Therefore, the amount of sTLOS received is smaller than the staked TLOS.',
+        stake_sidebar_content_fragment_4_bold: ' Rewards will be auto-compounded. ',
+        stake_sidebar_content_fragment_5: 'No further action is required.',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index e5ac5b327..374dd8eef 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AppPage from 'components/evm/AppPage.vue';
 import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
+import StakingTab from 'pages/evm/staking/StakingTab.vue';
 
 const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
@@ -12,7 +13,7 @@ const tabs = ['stake', 'unstake', 'withdraw'];
     </template>
 
     <template v-slot:stake>
-        <p>stake tab</p>
+        <StakingTab />
     </template>
 
     <template v-slot:unstake>
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index dc72d1eb0..c5f3c0692 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -66,6 +66,7 @@ const systemTokenPrice = computed(() => {
 });
 
 
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
new file mode 100644
index 000000000..c37bce9e0
--- /dev/null
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ethers } from 'ethers';
+
+import {
+    getAntelope,
+    useAccountStore,
+    useBalancesStore,
+    useChainStore,
+    useRexStore,
+    useUserStore,
+} from 'src/antelope';
+
+import EVMSidebarPage from 'src/layouts/EVMSidebarPage.vue';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
+import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { AntelopeError } from 'src/antelope/types';
+
+const label = 'current';
+
+const { t: $t } = useI18n();
+const uiDecimals = 2;
+const ant = getAntelope();
+const chainStore = useChainStore();
+const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
+const userStore = useUserStore();
+const balanceStore = useBalancesStore();
+const accountStore = useAccountStore();
+
+const systemToken = chainSettings.getSystemToken();
+const systemTokenSymbol = systemToken.symbol;
+const systemTokenDecimals = systemToken.decimals;
+const stakedToken = chainSettings.getStakedSystemToken();
+const stakedTokenSymbol = stakedToken.symbol;
+const stakedTokenDecimals = stakedToken.decimals;
+
+
+// data
+const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
+const inputModelValue = ref(ethers.constants.Zero);
+const estimatedGas = ref(ethers.constants.Zero);
+const stakedRatio = computed(() => {
+    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
+    return chainStore.getStakedRatio(label);
+});
+const outputModelValue = computed(() => {
+    if (stakedRatio.value.isZero()) {
+        return ethers.constants.Zero;
+    }
+    const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
+    console.log('outputModelValue computed: ', output.toString());
+    return output;
+});
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
+    balance => balance.token.contract === systemToken.address)[0],
+);
+const systemTokenFiatPrice = computed(() => systemTokenBalanceInfo.value?.token.price.getAmountInFiatStr(1) ?? '1');
+const systemTokenBalance = computed(() => systemTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
+const sidebarContent = computed(() => {
+    const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
+    const content = [{
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_1',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_2_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_3',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_4_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_5',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }];
+
+    return {
+        header,
+        content,
+    };
+});
+const availableTostake = computed(() => {
+    const available = systemTokenBalance.value.sub(estimatedGas.value);
+
+    if (available.lt(0)) {
+        return ethers.constants.Zero;
+    }
+    return available;
+});
+const formIsValid = computed(() =>
+    !inputModelValue.value.isZero() &&
+    inputModelValue.value.lt(availableTostake.value),
+);
+const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeSystemTokens'));
+
+
+// methods
+onBeforeMount(() => {
+    // https://github.com/telosnetwork/telos-wallet/issues/274
+    const GAS_FOR_stakePING_TOKEN = 55500;
+    chainSettings.getEstimatedGas(GAS_FOR_stakePING_TOKEN).then((gas) => {
+        estimatedGas.value = gas.system;
+    });
+});
+
+async function handleCtaClick() {
+    const label = 'logged';
+    if (!await accountStore.isConnectedToCorrectNetwork(label)) {
+        const networkName = useChainStore().loggedChain.settings.getDisplay();
+        const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
+
+        ant.config.notifyFailureWithAction(errorMessage, {
+            label: ant.config.localizationHandler('evm_wallet.switch'),
+        });
+
+        return;
+    }
+
+    if (formIsValid.value) {
+        try {
+            const tx = await useRexStore().stakeSystemTokens(label, inputModelValue.value);
+            const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
+
+            const dismiss = ant.config.notifyNeutralMessageHandler(
+                $t('notification.neutral_message_stakeping', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+            );
+
+            tx.wait().then(() => {
+                ant.config.notifySuccessfulTrxHandler(
+                    `${chainSettings.getExplorerUrl()}/tx/${tx.hash}`,
+                );
+            }).catch((err) => {
+                console.error(err);
+            }).finally(() => {
+                dismiss();
+            });
+        } catch (err) {
+            console.error(err);
+            if (err instanceof AntelopeError) {
+                const evmErr = err as AntelopeError;
+                ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
+            } else {
+                ant.config.notifyFailureMessage($t('evm_wallet.general_error'));
+            }
+        }
+    }
+}
+</script>
+
+<template>
+<EVMSidebarPage :sidebar-content="sidebarContent">
+
+    <!-- convert ratio 1:stakedRatio -->
+    <div class="row q-mb-xl">
+        <div class="col-12">
+            <div class="c-stake-tab__badge-container">
+                <ConversionRateBadge
+                    :token-one-symbol="systemTokenSymbol"
+                    :token-two-symbol="stakedTokenSymbol"
+                    :token-two-decimals="systemTokenDecimals"
+                    :token-two-amount="stakedRatio"
+                    :decimals="uiDecimals"
+                />
+            </div>
+        </div>
+    </div>
+
+    <!-- TLOS input -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="inputModelValue"
+                :symbol="systemTokenSymbol"
+                :decimals="systemTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :secondary-currency-code="fiatCurrency"
+                :secondary-currency-decimals="2"
+                :secondary-currency-conversion-factor="systemTokenFiatPrice"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                :max-value="availableTostake"
+                class="c-stake-tab__input"
+            />
+        </div>
+    </div>
+
+    <!-- arrow -->
+    <div class="row q-mb-sm">
+        <div class="col-12 text-center">
+            <img
+                src="~assets/icon--arrow-down.svg"
+                :alt="$t('global.arrow_icon_alt')"
+                height="20"
+                width="18"
+            >
+        </div>
+    </div>
+
+    <!-- output field (readonly) -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="outputModelValue"
+                :symbol="stakedTokenSymbol"
+                :decimals="stakedTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                class="c-stake-tab__input"
+                readonly="readonly"
+            />
+        </div>
+    </div>
+
+    <!-- stake button -->
+    <div class="row">
+        <div class="col-12">
+            <div class="c-stake-tab__cta-container">
+                <q-btn
+                    color="primary"
+                    :disable="!formIsValid"
+                    :loading="ctaIsLoading"
+                    :label="$t('evm_stake.stake')"
+                    :aria-label="$t(
+                        'evm_stake.stake_button_label',
+                        { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+                    )"
+                    @click="handleCtaClick"
+                />
+            </div>
+        </div>
+    </div>
+</EVMSidebarPage>
+</template>
+
+<style lang="scss">
+.c-stake-tab {
+    &__badge-container,
+    &__cta-container,
+    &__input {
+        max-width: 320px;
+        margin: auto;
+    }
+
+    &__badge-container,
+    &__cta-container {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+</style>
diff --git a/src/pages/evm/wrap/UnwrapTab.vue b/src/pages/evm/wrap/UnwrapTab.vue
index ac8e4d1f1..cf4d690e0 100644
--- a/src/pages/evm/wrap/UnwrapTab.vue
+++ b/src/pages/evm/wrap/UnwrapTab.vue
@@ -124,6 +124,7 @@ async function handleUnwrapClick() {
                     :token-two-symbol="systemTokenSymbol"
                     :token-two-decimals="systemTokenDecimals"
                     :token-two-amount="oneEth"
+                    :decimals="0"
                 />
             </div>
         </div>
diff --git a/src/pages/evm/wrap/WrapTab.vue b/src/pages/evm/wrap/WrapTab.vue
index 3680889ef..3339f5ac2 100644
--- a/src/pages/evm/wrap/WrapTab.vue
+++ b/src/pages/evm/wrap/WrapTab.vue
@@ -140,6 +140,7 @@ async function handleCtaClick() {
                     :token-two-symbol="systemTokenSymbol"
                     :token-two-decimals="systemTokenDecimals"
                     :token-two-amount="oneEth"
+                    :decimals="0"
                 />
             </div>
         </div>

From f74e39d3a6bfc34321b5c7555626e817f2fdb397 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sun, 3 Sep 2023 13:53:59 -0300
Subject: [PATCH 081/268] Staking tab fully functional

---
 src/antelope/stores/balances.ts               |  38 +--
 src/antelope/stores/rex.ts                    |  55 +++-
 src/antelope/stores/utils/trx-utils.ts        |  29 ++
 .../authenticators/EVMAuthenticator.ts        |   3 +
 .../authenticators/InjectedProviderAuth.ts    |  38 ++-
 .../wallets/authenticators/OreIdAuth.ts       |  13 +
 .../authenticators/WalletConnectAuth.ts       |  12 +
 src/components/evm/inputs/CurrencyInput.vue   |   9 +-
 src/i18n/en-us/index.js                       |   6 +-
 src/pages/evm/staking/StakingTab.vue          |  13 +-
 src/pages/evm/staking/UnstakingTab.vue        | 258 ++++++++++++++++++
 test/jest/utils/antelope/index.ts             |   1 +
 test/jest/utils/antelope/mockData.ts          |   2 +
 test/jest/utils/antelope/store-chain.ts       |   4 +
 test/jest/utils/antelope/store-utils.ts       |  12 +
 15 files changed, 440 insertions(+), 53 deletions(-)
 create mode 100644 src/antelope/stores/utils/trx-utils.ts
 create mode 100644 src/pages/evm/staking/UnstakingTab.vue
 create mode 100644 test/jest/utils/antelope/store-utils.ts

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index a608cbc42..ae51a1ae9 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -35,7 +35,6 @@ import {
     useFeedbackStore,
     useChainStore,
     useEVMStore,
-    usePlatformStore,
 } from 'src/antelope';
 import { formatWei } from 'src/antelope/stores/utils';
 import { BigNumber, ethers } from 'ethers';
@@ -51,6 +50,7 @@ import { AccountModel, EvmAccountModel } from 'src/antelope/stores/account';
 import { EVMAuthenticator } from 'src/antelope/wallets';
 import { filter } from 'rxjs';
 import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { subscribeForTransactionReceipt } from 'src/antelope/stores/utils/trx-utils';
 
 export interface BalancesState {
     __balances:  { [label: Label]: TokenBalance[] };
@@ -254,36 +254,14 @@ export const useBalancesStore = defineStore(store_name, {
             }
         },
         async subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<TransactionResponse> {
-            this.trace('subscribeForTransactionReceipt', response.hash);
-            if (account.isNative) {
-                throw new AntelopeError('Not implemented yet for native');
-            } else {
-                const authenticator = account.authenticator as EVMAuthenticator;
-                const provider = await authenticator.web3Provider();
-                if (provider) {
-                    // instead of await, we use then() to return the response immediately
-                    // and perform the balance update in the background
-                    const whenConfirmed = provider.waitForTransaction(response.hash).then((receipt: ethers.providers.TransactionReceipt) => {
-                        this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
-                        if (receipt.status === 1) {
-                            const account = useAccountStore().loggedAccount;
-                            if (account?.account) {
-                                this.updateBalancesForAccount('logged', account);
-                            }
-                        }
-                        return receipt;
-                    });
-                    // we add the wait method to the response,
-                    // so that the caller can subscribe to the confirmation event
-                    response.wait = async () => whenConfirmed;
-                } else {
-                    if (usePlatformStore().isMobile) {
-                        response.wait = async () => Promise.resolve({} as ethers.providers.TransactionReceipt);
-                    } else {
-                        throw new AntelopeError('antelope.evm.error_no_provider');
-                    }
+            this.trace('subscribeForTransactionReceipt', account.account, response.hash);
+            subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
+                this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
+                if (receipt.status === 1) {
+                    this.updateBalancesForAccount('logged', account);
                 }
-            }
+                return receipt;
+            });
             return response;
         },
         async prepareWagmiSystemTokenTransferConfig(label: Label, to: string, amount: bigint): Promise<void> {
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 39dbb148a..aa686e116 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -16,10 +16,10 @@ import {
 import { AntelopeError, Label, TransactionResponse } from 'src/antelope/types';
 import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
-import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
+import { getAntelope, useBalancesStore, useChainStore, useEVMStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION } from 'src/antelope/stores/utils';
-
+import { subscribeForTransactionReceipt } from 'src/antelope/stores/utils/trx-utils';
 
 
 export interface EvmRexDeposit {
@@ -85,7 +85,7 @@ export const useRexStore = defineStore(store_name, {
             const contract = await useEVMStore().getContract(authenticator, address);
             if (!contract) {
                 this.trace('getStakedSystemContractInstance', label, '-> no contract');
-                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+                throw new AntelopeError('antelope.rex.error_contract_not_found', { address });
             }
             const contractInstance = await contract.getContractInstance();
             return contractInstance;
@@ -188,18 +188,55 @@ export const useRexStore = defineStore(store_name, {
             this.setBalance(label, balance);
         },
         /**
-         * utility method to get the number of decimals for the staked system token
+         * utility function to get the number of decimals for the staked system token
          * @returns the number of decimals for the staked system token
          */
         getStakingDecimals() {
             return useChainStore().currentEvmChain?.settings.getStakedSystemToken().decimals || WEI_PRECISION;
         },
         // transactions ----------
-        async stakeSystemTokens(label: string, amount: ethers.BigNumber): Promise<TransactionResponse> {
-            // TODO: implement
-            console.error('stakeSystemTokens not implemented yet');
-            this.trace('stakeSystemTokens', label, amount);
-            return {} as TransactionResponse;
+        /**
+         * This methos sould be called by any transaction performed by this store. It subscribes to the transaction
+         * receipt and updates the balance and rex status for the account if the transaction is successful.
+         * @param account account performing the transaction
+         * @param response the transaction response holding the hash
+         * @returns the same transaction response but modified by the utility function subscribeForTransactionReceipt
+         */
+        async subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<TransactionResponse> {
+            this.trace('subscribeForTransactionReceipt', account.account, response.hash);
+            subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
+                this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
+                if (receipt.status === 1) {
+                    this.updateRexDataForAccount('logged', account);
+                    useBalancesStore().updateBalancesForAccount('logged', account);
+                }
+                return receipt;
+            });
+            return response;
+        },
+        /**
+         * Performs the staking of System Tokens for a giuven account on the REX system of a given network.
+         * @param label identifies the context (account-network) for the data
+         * @param amount the amount of tokens to stake
+         * @returns the transaction response holding the hash and a wait method to subscribe to the transaction receipt
+         */
+        async stakeEVMSystemTokens(label: string, amount: ethers.BigNumber): Promise<TransactionResponse> {
+            const funcname = 'stakeEVMSystemTokens';
+            this.trace(funcname, label, amount.toString());
+
+            try {
+                useFeedbackStore().setLoading(funcname);
+                const account = useAccountStore().getAccount(label);
+                const authenticator = useAccountStore().getEVMAuthenticator(label);
+                return await authenticator.stakeSystemTokens(amount)
+                    .then(r => this.subscribeForTransactionReceipt(account, r as TransactionResponse));
+            } catch (error) {
+                const trxError = getAntelope().config.wrapError('antelope.evm.error_wrap_failed', error);
+                getAntelope().config.transactionErrorHandler(trxError, funcname);
+                throw trxError;
+            } finally {
+                useFeedbackStore().unsetLoading(funcname);
+            }
         },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
diff --git a/src/antelope/stores/utils/trx-utils.ts b/src/antelope/stores/utils/trx-utils.ts
new file mode 100644
index 000000000..9d7305fa0
--- /dev/null
+++ b/src/antelope/stores/utils/trx-utils.ts
@@ -0,0 +1,29 @@
+import { usePlatformStore } from 'src/antelope';
+import { ethers } from 'ethers';
+import { AccountModel } from 'src/antelope/stores/account';
+import { AntelopeError, TransactionResponse } from 'src/antelope/types';
+import { EVMAuthenticator } from 'src/antelope/wallets';
+
+
+export async function subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<ethers.providers.TransactionReceipt> {
+    if (account.isNative) {
+        throw new AntelopeError('Not implemented yet for native');
+    } else {
+        const authenticator = account.authenticator as EVMAuthenticator;
+        const provider = await authenticator.web3Provider();
+        if (provider) {
+            const whenConfirmed = provider.waitForTransaction(response.hash);
+            // we add the wait method to the response,
+            // so that the caller can subscribe to the confirmation event
+            response.wait = async () => whenConfirmed;
+            return whenConfirmed;
+        } else {
+            if (usePlatformStore().isMobile) {
+                response.wait = async () => Promise.resolve({} as ethers.providers.TransactionReceipt);
+                return Promise.resolve({} as ethers.providers.TransactionReceipt);
+            } else {
+                throw new AntelopeError('antelope.evm.error_no_provider');
+            }
+        }
+    }
+}
diff --git a/src/antelope/wallets/authenticators/EVMAuthenticator.ts b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
index 901a3cd29..c10e04289 100644
--- a/src/antelope/wallets/authenticators/EVMAuthenticator.ts
+++ b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
@@ -10,6 +10,7 @@ import { usePlatformStore } from 'src/antelope/stores/platform';
 import { AntelopeError, EvmTransactionResponse, ExceptionError, TokenClass, addressString } from 'src/antelope/types';
 
 export abstract class EVMAuthenticator {
+
     readonly label: string;
     readonly trace: (message: string, ...args: unknown[]) => void;
 
@@ -27,6 +28,8 @@ export abstract class EVMAuthenticator {
     abstract prepareTokenForTransfer(token: TokenClass | null, amount: BigNumber, to: string): Promise<void>;
     abstract wrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
     abstract unwrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
+    abstract stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
+    abstract unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
     abstract isConnectedTo(chainId: string): Promise<boolean>;
     abstract externalProvider(): Promise<ethers.providers.ExternalProvider>;
     abstract web3Provider(): Promise<ethers.providers.Web3Provider>;
diff --git a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
index 8fb65a952..b9989004c 100644
--- a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
+++ b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
@@ -2,7 +2,7 @@
 
 import { BigNumber, ethers } from 'ethers';
 import { BehaviorSubject, filter, map } from 'rxjs';
-import { useChainStore, useEVMStore, useFeedbackStore } from 'src/antelope';
+import { useAccountStore, useChainStore, useEVMStore, useFeedbackStore } from 'src/antelope';
 import {
     AntelopeError,
     ERC20_TYPE,
@@ -250,6 +250,42 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
         });
     }
 
+    async stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
+        this.trace('stakeSystemTokens', amount.toString());
+
+        const chain = useChainStore().getChain(this.label);
+        const stakedToken = (chain.settings as EVMChainSettings).getStakedSystemToken();
+
+        const evm = useEVMStore();
+        const contract = await evm.getContract(this, stakedToken.address, stakedToken.type);
+        if (contract) {
+            const contractInstance = await contract.getContractInstance();
+            const transaction = (await contractInstance.depositTLOS({ value: amount })) as EvmTransactionResponse;
+            return transaction;
+        } else {
+            throw new AntelopeError('antelope.balances.error_token_contract_not_found', { address: stakedToken.address });
+        }
+    }
+
+    async unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
+        this.trace('unstakeSystemTokens', amount.toString());
+
+        const chain = useChainStore().getChain(this.label);
+        const stakedToken = (chain.settings as EVMChainSettings).getStakedSystemToken();
+
+        const evm = useEVMStore();
+        const contract = await evm.getContract(this, stakedToken.address, stakedToken.type);
+        if (contract) {
+            const contractInstance = await contract.getContractInstance();
+            const amountInWei = amount.toString();
+            const address = useAccountStore().getAccount(this.label).account;
+            return contractInstance.withdraw(amountInWei, address, address);
+        } else {
+            throw new AntelopeError('antelope.balances.error_token_contract_not_found', { address: stakedToken.address });
+        }
+    }
+
+
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
         return useEVMStore().isProviderOnTheCorrectChain(await this.web3Provider(), chainId);
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index 35c4d6ddf..49e01ab93 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -365,6 +365,19 @@ export class OreIdAuth extends EVMAuthenticator {
         } as EvmTransactionResponse;
     }
 
+    async stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
+        // TODO: implement
+        this.trace('stakeSystemTokens', amount.toString());
+        return Promise.resolve({} as EvmTransactionResponse);
+    }
+
+    async unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
+        // TODO: implement
+        this.trace('unstakeSystemTokens', amount.toString());
+        return Promise.resolve({} as EvmTransactionResponse);
+    }
+
+
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
         return true;
diff --git a/src/antelope/wallets/authenticators/WalletConnectAuth.ts b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
index fa2ce28e0..aa8a5981d 100644
--- a/src/antelope/wallets/authenticators/WalletConnectAuth.ts
+++ b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
@@ -353,6 +353,18 @@ export class WalletConnectAuth extends EVMAuthenticator {
         return await writeContract(sendConfig);
     }
 
+    async stakeSystemTokens(amount: BigNumber): Promise<WriteContractResult> {
+        // TODO: implement
+        this.trace('stakeSystemTokens', amount.toString());
+        return Promise.resolve({} as WriteContractResult);
+    }
+
+    async unstakeSystemTokens(amount: BigNumber): Promise<WriteContractResult> {
+        // TODO: implement
+        this.trace('unstakeSystemTokens', amount.toString());
+        return Promise.resolve({} as WriteContractResult);
+    }
+
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
 
diff --git a/src/components/evm/inputs/CurrencyInput.vue b/src/components/evm/inputs/CurrencyInput.vue
index bb8e82b80..6cbd0d1d8 100644
--- a/src/components/evm/inputs/CurrencyInput.vue
+++ b/src/components/evm/inputs/CurrencyInput.vue
@@ -931,15 +931,20 @@ export default defineComponent({
                 this.inputIsDirty = false;
             });
         },
+
+        // utility to convert to string properties attrs typed as never
+        asString(val: unknown): string {
+            return val as string;
+        },
     },
 });
 </script>
 
 <template>
 <div
-    :id="($attrs.id as string)"
+    :id="asString($attrs.id)"
     :class="{
-        [$attrs.class as string]: !!$attrs.class,
+        [asString($attrs.class)]: !!$attrs.class,
         'c-currency-input': true,
         'c-currency-input--error': !!visibleErrorText,
         'c-currency-input--readonly': !!inputElementAttrs.readonly,
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index ee4a94f07..e3f215ac8 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -245,7 +245,7 @@ export default {
         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}</b>',
+        neutral_message_staking: 'Staking <b>{quantity} {symbol}</b>',
         neutral_message_unstaking: 'Unstaking <b>{quantity}</b>',
         neutral_message_revoking: 'Revoking  <b>{symbol}</b> allowance for <b>{address}</b>',
         neutral_message_wrapping: 'Wrapping <b>{quantity} {symbol}</b>',
@@ -531,6 +531,7 @@ export default {
             error_apy: 'Error in getting APY',
             error_invalid_network: 'Invalid network',
             error_no_default_authenticator: 'No default authenticator found',
+            error_no_default_authenticator: 'No default authenticator found',
         },
         account: {
             error_login_native: 'An error has occurred trying to login to the native chain',
@@ -546,6 +547,9 @@ export default {
             error_at_transfer_tokens: 'An error has occurred trying to transfer tokens',
             error_token_contract_not_found: 'Token contract not found for address {address}',
         },
+        rex: {
+            error_contract_not_found: 'Contract not found for address {address}',
+        },
         wallets: {
             error_system_token_transfer_config: 'Error getting Wagmi system token transfer config',
             error_token_transfer_config: 'Error getting Wagmi token transfer config',
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index c37bce9e0..762cf3f90 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -17,7 +17,6 @@ import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
 import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
 import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
-import { AntelopeError } from 'src/antelope/types';
 
 const label = 'current';
 
@@ -104,7 +103,7 @@ const formIsValid = computed(() =>
     !inputModelValue.value.isZero() &&
     inputModelValue.value.lt(availableTostake.value),
 );
-const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeSystemTokens'));
+const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeEVMSystemTokens'));
 
 
 // methods
@@ -131,11 +130,11 @@ async function handleCtaClick() {
 
     if (formIsValid.value) {
         try {
-            const tx = await useRexStore().stakeSystemTokens(label, inputModelValue.value);
+            const tx = await useRexStore().stakeEVMSystemTokens(label, inputModelValue.value);
             const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
 
             const dismiss = ant.config.notifyNeutralMessageHandler(
-                $t('notification.neutral_message_stakeping', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+                $t('notification.neutral_message_staking', { quantity: formattedAmount, symbol: systemTokenSymbol }),
             );
 
             tx.wait().then(() => {
@@ -149,12 +148,6 @@ async function handleCtaClick() {
             });
         } catch (err) {
             console.error(err);
-            if (err instanceof AntelopeError) {
-                const evmErr = err as AntelopeError;
-                ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
-            } else {
-                ant.config.notifyFailureMessage($t('evm_wallet.general_error'));
-            }
         }
     }
 }
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
new file mode 100644
index 000000000..59185d0bb
--- /dev/null
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ethers } from 'ethers';
+
+import {
+    getAntelope,
+    useAccountStore,
+    useBalancesStore,
+    useChainStore,
+    useRexStore,
+    useUserStore,
+} from 'src/antelope';
+
+import EVMSidebarPage from 'src/layouts/EVMSidebarPage.vue';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
+import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { AntelopeError } from 'src/antelope/types';
+
+const label = 'current';
+
+const { t: $t } = useI18n();
+const uiDecimals = 2;
+const ant = getAntelope();
+const chainStore = useChainStore();
+const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
+const userStore = useUserStore();
+const balanceStore = useBalancesStore();
+const accountStore = useAccountStore();
+
+const systemToken = chainSettings.getSystemToken();
+const systemTokenSymbol = systemToken.symbol;
+const systemTokenDecimals = systemToken.decimals;
+const stakedToken = chainSettings.getStakedSystemToken();
+const stakedTokenSymbol = stakedToken.symbol;
+const stakedTokenDecimals = stakedToken.decimals;
+
+
+// data
+const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
+const inputModelValue = ref(ethers.constants.Zero);
+const estimatedGas = ref(ethers.constants.Zero);
+const stakedRatio = computed(() => {
+    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
+    return chainStore.getStakedRatio(label);
+});
+const outputModelValue = computed(() => {
+    if (stakedRatio.value.isZero()) {
+        return ethers.constants.Zero;
+    }
+    const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
+    console.log('outputModelValue computed: ', output.toString());
+    return output;
+});
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
+    balance => balance.token.contract === systemToken.address)[0],
+);
+const systemTokenFiatPrice = computed(() => systemTokenBalanceInfo.value?.token.price.getAmountInFiatStr(1) ?? '1');
+const systemTokenBalance = computed(() => systemTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
+const sidebarContent = computed(() => {
+    const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
+    const content = [{
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_1',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_2_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_3',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_4_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_5',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }];
+
+    return {
+        header,
+        content,
+    };
+});
+const availableTostake = computed(() => {
+    const available = systemTokenBalance.value.sub(estimatedGas.value);
+
+    if (available.lt(0)) {
+        return ethers.constants.Zero;
+    }
+    return available;
+});
+const formIsValid = computed(() =>
+    !inputModelValue.value.isZero() &&
+    inputModelValue.value.lt(availableTostake.value),
+);
+const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeEVMSystemTokens'));
+
+
+// methods
+onBeforeMount(() => {
+    // https://github.com/telosnetwork/telos-wallet/issues/274
+    const GAS_FOR_stakePING_TOKEN = 55500;
+    chainSettings.getEstimatedGas(GAS_FOR_stakePING_TOKEN).then((gas) => {
+        estimatedGas.value = gas.system;
+    });
+});
+
+async function handleCtaClick() {
+    const label = 'logged';
+    if (!await accountStore.isConnectedToCorrectNetwork(label)) {
+        const networkName = useChainStore().loggedChain.settings.getDisplay();
+        const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
+
+        ant.config.notifyFailureWithAction(errorMessage, {
+            label: ant.config.localizationHandler('evm_wallet.switch'),
+        });
+
+        return;
+    }
+
+    if (formIsValid.value) {
+        try {
+            const tx = await useRexStore().stakeEVMSystemTokens(label, inputModelValue.value);
+            const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
+
+            const dismiss = ant.config.notifyNeutralMessageHandler(
+                $t('notification.neutral_message_staking', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+            );
+
+            tx.wait().then(() => {
+                ant.config.notifySuccessfulTrxHandler(
+                    `${chainSettings.getExplorerUrl()}/tx/${tx.hash}`,
+                );
+            }).catch((err) => {
+                console.error(err);
+            }).finally(() => {
+                dismiss();
+            });
+        } catch (err) {
+            console.error(err);
+        }
+    }
+}
+</script>
+
+<template>
+<EVMSidebarPage :sidebar-content="sidebarContent">
+
+    <!-- convert ratio 1:stakedRatio -->
+    <div class="row q-mb-xl">
+        <div class="col-12">
+            <div class="c-stake-tab__badge-container">
+                <ConversionRateBadge
+                    :token-one-symbol="systemTokenSymbol"
+                    :token-two-symbol="stakedTokenSymbol"
+                    :token-two-decimals="systemTokenDecimals"
+                    :token-two-amount="stakedRatio"
+                    :decimals="uiDecimals"
+                />
+            </div>
+        </div>
+    </div>
+
+    <!-- TLOS input -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="inputModelValue"
+                :symbol="systemTokenSymbol"
+                :decimals="systemTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :secondary-currency-code="fiatCurrency"
+                :secondary-currency-decimals="2"
+                :secondary-currency-conversion-factor="systemTokenFiatPrice"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                :max-value="availableTostake"
+                class="c-stake-tab__input"
+            />
+        </div>
+    </div>
+
+    <!-- arrow -->
+    <div class="row q-mb-sm">
+        <div class="col-12 text-center">
+            <img
+                src="~assets/icon--arrow-down.svg"
+                :alt="$t('global.arrow_icon_alt')"
+                height="20"
+                width="18"
+            >
+        </div>
+    </div>
+
+    <!-- output field (readonly) -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="outputModelValue"
+                :symbol="stakedTokenSymbol"
+                :decimals="stakedTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                class="c-stake-tab__input"
+                readonly="readonly"
+            />
+        </div>
+    </div>
+
+    <!-- stake button -->
+    <div class="row">
+        <div class="col-12">
+            <div class="c-stake-tab__cta-container">
+                <q-btn
+                    color="primary"
+                    :disable="!formIsValid"
+                    :loading="ctaIsLoading"
+                    :label="$t('evm_stake.stake')"
+                    :aria-label="$t(
+                        'evm_stake.stake_button_label',
+                        { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+                    )"
+                    @click="handleCtaClick"
+                />
+            </div>
+        </div>
+    </div>
+</EVMSidebarPage>
+</template>
+
+<style lang="scss">
+.c-stake-tab {
+    &__badge-container,
+    &__cta-container,
+    &__input {
+        max-width: 320px;
+        margin: auto;
+    }
+
+    &__badge-container,
+    &__cta-container {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+</style>
diff --git a/test/jest/utils/antelope/index.ts b/test/jest/utils/antelope/index.ts
index 808228ba9..52e19d862 100644
--- a/test/jest/utils/antelope/index.ts
+++ b/test/jest/utils/antelope/index.ts
@@ -52,3 +52,4 @@ export * from 'test/jest/utils/antelope/store-platform';
 export * from 'test/jest/utils/antelope/wagmi-web3';
 export * from 'test/jest/utils/antelope/globalProps';
 
+
diff --git a/test/jest/utils/antelope/mockData.ts b/test/jest/utils/antelope/mockData.ts
index 3aa6d63f6..a7a412931 100644
--- a/test/jest/utils/antelope/mockData.ts
+++ b/test/jest/utils/antelope/mockData.ts
@@ -96,6 +96,8 @@ const MockData = {
         id: CHAIN_ID,
         display: TEST_NETWORK_NAME,
         hyperionEndpoint: ENDPOINT_URL,
+        stakedRatio: ethers.BigNumber.from('0600000000000000000'),
+        unstakedRatio: ethers.BigNumber.from('1200000000000000000'),
     },
     Network: TEST_NETWORK,
     ExplorerUrl: EXPLORER_URL,
diff --git a/test/jest/utils/antelope/store-chain.ts b/test/jest/utils/antelope/store-chain.ts
index 92d49ff0c..a9ab1b180 100644
--- a/test/jest/utils/antelope/store-chain.ts
+++ b/test/jest/utils/antelope/store-chain.ts
@@ -39,6 +39,8 @@ const getTokens = jest.fn().mockImplementation(() => Chain.tokens);
 const getExplorerUrl = jest.fn().mockImplementation(() => MockData.ExplorerUrl);
 const getEcosystemUrl = jest.fn().mockImplementation(() => MockData.EcosystemUrl);
 const getNetworkSettings = jest.fn().mockImplementation(() => ChainSettings);
+const getStakedRatio = jest.fn().mockImplementation(() => MockData.Chain.stakedRatio);
+const getUnstakedRatio = jest.fn().mockImplementation(() => MockData.Chain.unstakedRatio);
 
 // actions -
 const updateChainData = jest.fn().mockImplementation(() => ({
@@ -72,6 +74,8 @@ const ChainGetters = {
     getExplorerUrl,
     getEcosystemUrl,
     getNetworkSettings,
+    getStakedRatio,
+    getUnstakedRatio,
 };
 
 const ChainActions = {
diff --git a/test/jest/utils/antelope/store-utils.ts b/test/jest/utils/antelope/store-utils.ts
new file mode 100644
index 000000000..4c9df85ad
--- /dev/null
+++ b/test/jest/utils/antelope/store-utils.ts
@@ -0,0 +1,12 @@
+
+const subscribeForTransactionReceipt = jest.fn().mockImplementation(() => ({
+    then: jest.fn().mockImplementation((cb: () => void) => cb()),
+}));
+
+jest.mock('src/antelope/stores/utils/trx-utils', () => ({
+    subscribeForTransactionReceipt,
+}));
+
+export {
+    subscribeForTransactionReceipt,
+};

From f8505f777ab3c60801a6072e40d85a347ed0a407 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sun, 3 Sep 2023 14:21:36 -0300
Subject: [PATCH 082/268] removing console logs

---
 .../authenticators/InjectedProviderAuth.ts    |   6 +-
 src/components/ConversionRateBadge.vue        |   1 -
 src/pages/evm/staking/StakingTab.vue          |   6 +-
 src/pages/evm/staking/UnstakingTab.vue        | 257 ------------------
 4 files changed, 4 insertions(+), 266 deletions(-)
 delete mode 100644 src/pages/evm/staking/UnstakingTab.vue

diff --git a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
index b9989004c..93d5e857c 100644
--- a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
+++ b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
@@ -83,7 +83,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
             const wethContract = new ethers.Contract(wrappedSystemTokenContractAddress, wtlosAbiDeposit, signer);
 
             if (!wethContract) {
-                console.log('wrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
+                this.trace('wrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
                 throw 'Unable to get wrapped system contract instance';
             }
             wrappedSystemTokenContractInstance = wethContract;
@@ -105,7 +105,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
     }
 
     async unwrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse> {
-        console.log('unwrapSystemToken', amount.toString());
+        this.trace('unwrapSystemToken', amount.toString());
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address;
         let wrappedSystemTokenContractInstance: ethers.Contract | undefined;
@@ -115,7 +115,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
             const wrappedSystemTokenContract = new ethers.Contract(wrappedSystemTokenContractAddress, wtlosAbiWithdraw, signer);
 
             if (!wrappedSystemTokenContract) {
-                console.log('unwrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
+                this.trace('unwrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
                 throw 'Unable to get wrapped system contract instance';
             }
             wrappedSystemTokenContractInstance = wrappedSystemTokenContract;
diff --git a/src/components/ConversionRateBadge.vue b/src/components/ConversionRateBadge.vue
index b74f4fc75..336ad75f0 100644
--- a/src/components/ConversionRateBadge.vue
+++ b/src/components/ConversionRateBadge.vue
@@ -18,7 +18,6 @@ const props = defineProps<{
 const fiatLocale = computed(() => userStore.fiatLocale);
 
 const label = computed(() => {
-    console.log('label computed: ', props.tokenOneSymbol, props.tokenTwoSymbol, props.tokenTwoAmount.toString(), fiatLocale.value, props.tokenTwoDecimals);
     const abbreviate = props.decimals === 0;
     const prettyTokenTwoAmount = prettyPrintCurrency(
         props.tokenTwoAmount,
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index 762cf3f90..d8f6c194c 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -41,16 +41,12 @@ const stakedTokenDecimals = stakedToken.decimals;
 const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
 const inputModelValue = ref(ethers.constants.Zero);
 const estimatedGas = ref(ethers.constants.Zero);
-const stakedRatio = computed(() => {
-    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
-    return chainStore.getStakedRatio(label);
-});
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
 const outputModelValue = computed(() => {
     if (stakedRatio.value.isZero()) {
         return ethers.constants.Zero;
     }
     const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
-    console.log('outputModelValue computed: ', output.toString());
     return output;
 });
 // computed
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
deleted file mode 100644
index 762cf3f90..000000000
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ /dev/null
@@ -1,257 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { ethers } from 'ethers';
-
-import {
-    getAntelope,
-    useAccountStore,
-    useBalancesStore,
-    useChainStore,
-    useRexStore,
-    useUserStore,
-} from 'src/antelope';
-
-import EVMSidebarPage from 'src/layouts/EVMSidebarPage.vue';
-import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
-import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
-import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
-import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
-
-const label = 'current';
-
-const { t: $t } = useI18n();
-const uiDecimals = 2;
-const ant = getAntelope();
-const chainStore = useChainStore();
-const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
-const userStore = useUserStore();
-const balanceStore = useBalancesStore();
-const accountStore = useAccountStore();
-
-const systemToken = chainSettings.getSystemToken();
-const systemTokenSymbol = systemToken.symbol;
-const systemTokenDecimals = systemToken.decimals;
-const stakedToken = chainSettings.getStakedSystemToken();
-const stakedTokenSymbol = stakedToken.symbol;
-const stakedTokenDecimals = stakedToken.decimals;
-
-
-// data
-const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
-const inputModelValue = ref(ethers.constants.Zero);
-const estimatedGas = ref(ethers.constants.Zero);
-const stakedRatio = computed(() => {
-    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
-    return chainStore.getStakedRatio(label);
-});
-const outputModelValue = computed(() => {
-    if (stakedRatio.value.isZero()) {
-        return ethers.constants.Zero;
-    }
-    const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
-    console.log('outputModelValue computed: ', output.toString());
-    return output;
-});
-// computed
-const fiatLocale = computed(() => userStore.fiatLocale);
-const fiatCurrency = computed(() => userStore.fiatCurrency);
-const systemTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
-    balance => balance.token.contract === systemToken.address)[0],
-);
-const systemTokenFiatPrice = computed(() => systemTokenBalanceInfo.value?.token.price.getAmountInFiatStr(1) ?? '1');
-const systemTokenBalance = computed(() => systemTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
-const sidebarContent = computed(() => {
-    const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
-    const content = [{
-        text: $t(
-            'evm_stake.stake_sidebar_content_fragment_1',
-            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
-        ),
-    }, {
-        text: $t('evm_stake.stake_sidebar_content_fragment_2_bold'),
-        bold: true,
-    }, {
-        text: $t(
-            'evm_stake.stake_sidebar_content_fragment_3',
-            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
-        ),
-    }, {
-        text: $t('evm_stake.stake_sidebar_content_fragment_4_bold'),
-        bold: true,
-    }, {
-        text: $t(
-            'evm_stake.stake_sidebar_content_fragment_5',
-            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
-        ),
-    }];
-
-    return {
-        header,
-        content,
-    };
-});
-const availableTostake = computed(() => {
-    const available = systemTokenBalance.value.sub(estimatedGas.value);
-
-    if (available.lt(0)) {
-        return ethers.constants.Zero;
-    }
-    return available;
-});
-const formIsValid = computed(() =>
-    !inputModelValue.value.isZero() &&
-    inputModelValue.value.lt(availableTostake.value),
-);
-const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeEVMSystemTokens'));
-
-
-// methods
-onBeforeMount(() => {
-    // https://github.com/telosnetwork/telos-wallet/issues/274
-    const GAS_FOR_stakePING_TOKEN = 55500;
-    chainSettings.getEstimatedGas(GAS_FOR_stakePING_TOKEN).then((gas) => {
-        estimatedGas.value = gas.system;
-    });
-});
-
-async function handleCtaClick() {
-    const label = 'logged';
-    if (!await accountStore.isConnectedToCorrectNetwork(label)) {
-        const networkName = useChainStore().loggedChain.settings.getDisplay();
-        const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
-
-        ant.config.notifyFailureWithAction(errorMessage, {
-            label: ant.config.localizationHandler('evm_wallet.switch'),
-        });
-
-        return;
-    }
-
-    if (formIsValid.value) {
-        try {
-            const tx = await useRexStore().stakeEVMSystemTokens(label, inputModelValue.value);
-            const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
-
-            const dismiss = ant.config.notifyNeutralMessageHandler(
-                $t('notification.neutral_message_staking', { quantity: formattedAmount, symbol: systemTokenSymbol }),
-            );
-
-            tx.wait().then(() => {
-                ant.config.notifySuccessfulTrxHandler(
-                    `${chainSettings.getExplorerUrl()}/tx/${tx.hash}`,
-                );
-            }).catch((err) => {
-                console.error(err);
-            }).finally(() => {
-                dismiss();
-            });
-        } catch (err) {
-            console.error(err);
-        }
-    }
-}
-</script>
-
-<template>
-<EVMSidebarPage :sidebar-content="sidebarContent">
-
-    <!-- convert ratio 1:stakedRatio -->
-    <div class="row q-mb-xl">
-        <div class="col-12">
-            <div class="c-stake-tab__badge-container">
-                <ConversionRateBadge
-                    :token-one-symbol="systemTokenSymbol"
-                    :token-two-symbol="stakedTokenSymbol"
-                    :token-two-decimals="systemTokenDecimals"
-                    :token-two-amount="stakedRatio"
-                    :decimals="uiDecimals"
-                />
-            </div>
-        </div>
-    </div>
-
-    <!-- TLOS input -->
-    <div class="row q-mb-lg">
-        <div class="col-12">
-            <CurrencyInput
-                v-model="inputModelValue"
-                :symbol="systemTokenSymbol"
-                :decimals="systemTokenDecimals"
-                :decimals-to-display="uiDecimals"
-                :secondary-currency-code="fiatCurrency"
-                :secondary-currency-decimals="2"
-                :secondary-currency-conversion-factor="systemTokenFiatPrice"
-                :locale="fiatLocale"
-                :label="$t('evm_stake.stake_input_label')"
-                :max-value="availableTostake"
-                class="c-stake-tab__input"
-            />
-        </div>
-    </div>
-
-    <!-- arrow -->
-    <div class="row q-mb-sm">
-        <div class="col-12 text-center">
-            <img
-                src="~assets/icon--arrow-down.svg"
-                :alt="$t('global.arrow_icon_alt')"
-                height="20"
-                width="18"
-            >
-        </div>
-    </div>
-
-    <!-- output field (readonly) -->
-    <div class="row q-mb-lg">
-        <div class="col-12">
-            <CurrencyInput
-                v-model="outputModelValue"
-                :symbol="stakedTokenSymbol"
-                :decimals="stakedTokenDecimals"
-                :decimals-to-display="uiDecimals"
-                :locale="fiatLocale"
-                :label="$t('evm_stake.stake_input_label')"
-                class="c-stake-tab__input"
-                readonly="readonly"
-            />
-        </div>
-    </div>
-
-    <!-- stake button -->
-    <div class="row">
-        <div class="col-12">
-            <div class="c-stake-tab__cta-container">
-                <q-btn
-                    color="primary"
-                    :disable="!formIsValid"
-                    :loading="ctaIsLoading"
-                    :label="$t('evm_stake.stake')"
-                    :aria-label="$t(
-                        'evm_stake.stake_button_label',
-                        { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
-                    )"
-                    @click="handleCtaClick"
-                />
-            </div>
-        </div>
-    </div>
-</EVMSidebarPage>
-</template>
-
-<style lang="scss">
-.c-stake-tab {
-    &__badge-container,
-    &__cta-container,
-    &__input {
-        max-width: 320px;
-        margin: auto;
-    }
-
-    &__badge-container,
-    &__cta-container {
-        display: flex;
-        justify-content: flex-end;
-    }
-}
-</style>

From 5279437bd7629ba117055bce1778370b3e2a0a12 Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Mon, 4 Sep 2023 03:56:20 -0500
Subject: [PATCH 083/268] fix: card width

---
 src/components/evm/ScrollableInfoCards.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index d05e600b5..5635d052f 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -99,7 +99,7 @@ const props = defineProps<{
         @include sm-and-up {
             width: 300px;
             &--small {
-                width: 220px;
+                width: 250px;
             }
         }
     }

From f6a5ead733686c58835fa0ded556cf3ab204bafa Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 5 Sep 2023 15:58:27 -0300
Subject: [PATCH 084/268] all "logged" labels changed to "current"

---
 src/antelope/index.ts                         |  3 +-
 src/antelope/stores/account.ts                | 71 ++++++-------------
 src/antelope/stores/balances.ts               | 19 ++---
 src/antelope/stores/chain.ts                  | 13 +---
 src/antelope/stores/evm.ts                    |  2 +-
 src/antelope/stores/nfts.ts                   |  4 +-
 src/antelope/stores/tokens.ts                 |  8 +--
 src/antelope/types/Basic.ts                   |  2 +-
 .../authenticators/EVMAuthenticator.ts        |  3 +-
 src/boot/antelope.ts                          |  2 +-
 src/pages/demo/SendPageErrors.vue             |  2 +-
 src/pages/evm/nfts/NftInventoryPage.vue       |  8 +--
 src/pages/evm/wallet/SendPage.vue             |  6 +-
 src/pages/evm/wrap/UnwrapTab.vue              |  2 +-
 src/pages/evm/wrap/WrapTab.vue                |  2 +-
 src/pages/home/EVMLoginButtons.vue            |  8 +--
 src/pages/home/NativeLoginButton.vue          |  2 +-
 .../pages/home/EVMLoginButtons.spec.ts        |  2 +-
 test/jest/utils/antelope/index.ts             |  2 +-
 19 files changed, 55 insertions(+), 106 deletions(-)

diff --git a/src/antelope/index.ts b/src/antelope/index.ts
index 9485206f0..51701c581 100644
--- a/src/antelope/index.ts
+++ b/src/antelope/index.ts
@@ -80,8 +80,7 @@ export class Antelope {
                 console.error('No chain name specified in environment config; the application will not run correctly');
             } else {
                 const network: string = chainNetworkNames[process.env.CHAIN_NAME];
-
-                chainStore.setCurrentChain(network);
+                chainStore.setChain('current', network);
             }
         }
 
diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index d6cfd4120..7c8156fc7 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -91,19 +91,19 @@ const store_name = 'account';
 export const useAccountStore = defineStore(store_name, {
     state: (): AccountState => (accountInitialState),
     getters: {
-        isAuthenticated: state => !!state.__accounts['logged'],
-        loggedAccount: state => state.__accounts['logged'],
-        loggedIsNative: state => state.__accounts['logged']?.isNative,
-        loggedEvmAccount: state => (state.__accounts['logged']?.isNative ?
-            null : state.__accounts['logged']) as EvmAccountModel,
-        loggedNativeAccount: state => (state.__accounts['logged']?.isNative ?
-            state.__accounts['logged'] : null) as NativeAccountModel,
+        isAuthenticated: state => !!state.__accounts['current'],
+        loggedAccount: state => state.__accounts['current'],
+        loggedIsNative: state => state.__accounts['current']?.isNative,
+        loggedEvmAccount: state => (state.__accounts['current']?.isNative ?
+            null : state.__accounts['current']) as EvmAccountModel,
+        loggedNativeAccount: state => (state.__accounts['current']?.isNative ?
+            state.__accounts['current'] : null) as NativeAccountModel,
         currentAccount: state => ({ ...state.__accounts['current'] }),
         currentEvmAccount: state => (state.__accounts['current']?.isNative ?
             null : state.__accounts['current']) as EvmAccountModel,
         currentIsLogged: state =>
-            state.__accounts['logged']?.account === state.__accounts['current']?.account &&
-            state.__accounts['logged']?.network === state.__accounts['current']?.network,
+            state.__accounts['current']?.account === state.__accounts['current']?.account &&
+            state.__accounts['current']?.network === state.__accounts['current']?.network,
         getAccount: state => (label: Label) => ({ ...state.__accounts[label] }),
         getAuthenticator: state => (label: Label) => state.__accounts[label]?.authenticator,
         getEVMAuthenticator: state => (label: Label) => state.__accounts[label]?.authenticator as EVMAuthenticator,
@@ -134,8 +134,7 @@ export const useAccountStore = defineStore(store_name, {
                         permission,
                         authenticator,
                     } as NativeAccountModel;
-                    this.setCurrentAccount(nativeAccount);
-                    this.setLoggedAccount(nativeAccount);
+                    this.setAccount(nativeAccount);
 
                     localStorage.setItem('network', network);
                     localStorage.setItem('account', account);
@@ -143,7 +142,7 @@ export const useAccountStore = defineStore(store_name, {
                     localStorage.setItem('autoLogin', authenticator.getName());
 
                     success = true;
-                    this.fetchAccountDataFor('logged', nativeAccount);
+                    this.fetchAccountDataFor('current', nativeAccount);
                     getAntelope().events.onLoggedIn.next(nativeAccount);
                 }
             } catch (error) {
@@ -181,15 +180,14 @@ export const useAccountStore = defineStore(store_name, {
                         displayAddress,
                         authenticator,
                     };
-                    this.setCurrentAccount(evmAccount);
-                    this.setLoggedAccount(evmAccount);
+                    this.setAccount(evmAccount);
 
                     localStorage.setItem('network', network);
                     localStorage.setItem('account', account);
                     localStorage.setItem('isNative', 'false');
                     localStorage.setItem('autoLogin', authenticator.getName());
                     success = true;
-                    this.fetchAccountDataFor('logged', evmAccount);
+                    this.fetchAccountDataFor('current', evmAccount);
                     getAntelope().events.onLoggedIn.next(evmAccount);
                 } else {
                     console.error('Error: ', 'EVM login failed??');
@@ -215,7 +213,7 @@ export const useAccountStore = defineStore(store_name, {
                 localStorage.removeItem('isNative');
                 localStorage.removeItem('autoLogin');
 
-                const logged = this.__accounts['logged'];
+                const logged = this.__accounts['current'];
                 const { authenticator } = logged;
                 try {
                     authenticator && (await authenticator.logout());
@@ -223,7 +221,7 @@ export const useAccountStore = defineStore(store_name, {
                     console.error('Authenticator logout error', error);
                 }
 
-                this.setLoggedAccount(null);
+                this.setAccount(null);
                 getAntelope().events.onLoggedOut.next();
             } catch (error) {
                 console.error('Error: ', errorToString(error));
@@ -234,7 +232,7 @@ export const useAccountStore = defineStore(store_name, {
 
         async autoLogin(): Promise<boolean> {
             this.trace('autoLogin');
-            const label = 'logged';
+            const label = 'current';
             try {
                 useFeedbackStore().setLoading('account.autoLogin');
                 const network = localStorage.getItem('network');
@@ -323,12 +321,7 @@ export const useAccountStore = defineStore(store_name, {
                     const chain = useChainStore().getChain(label).settings as NativeChainSettings;
                     const accountData = await chain.getAccount(nativeAccount.account);
                     nativeAccount.data = accountData;
-                    if (label === 'logged') {
-                        this.setLoggedAccount(nativeAccount);
-                    }
-                    if (label === 'current') {
-                        this.setCurrentAccount(nativeAccount);
-                    }
+                    this.setAccount(nativeAccount);
                 } else {
                     // There's no account data for EVM accounts
                 }
@@ -339,37 +332,15 @@ export const useAccountStore = defineStore(store_name, {
             }
         },
 
-        // commits
-        setCurrentAccount(account: AccountModel | null) {
-            this.trace('setCurrentAccount', account);
+        // commits -------
+        setAccount(account: AccountModel | null) {
+            this.trace('setAccount', account);
             const label = 'current';
             const before = `${this.__accounts[label]?.account ?? ''} ${this.__accounts[label]?.network ?? ''}`;
             try {
                 if (account) {
                     this.__accounts[label] = { ...this.__accounts[label], ...account };
-                } else {
-                    delete this.__accounts[label];
-                }
-            } catch (error) {
-                console.error('Error: ', errorToString(error));
-            } finally {
-                const after = `${this.__accounts[label]?.account ?? ''} ${this.__accounts[label]?.network ?? ''}`;
-                if (before !== after) {
-                    getAntelope().events.onAccountChanged.next({
-                        label, account: toRaw(this.__accounts[label]) as AccountModel,
-                    });
-                }
-            }
-        },
-
-        setLoggedAccount(account: AccountModel | null) {
-            this.trace('setLoggedAccount', account);
-            const label = 'logged';
-            const before = `${this.__accounts[label]?.account ?? ''} ${this.__accounts[label]?.network ?? ''}`;
-            try {
-                if (account) {
-                    this.__accounts[label] = { ...this.__accounts[label], ...account };
-                    useChainStore().setLoggedChain(account.network);
+                    useChainStore().setChain(label, account.network);
                 } else {
                     delete this.__accounts[label];
                 }
diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 71ea9defb..363e319c2 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -62,7 +62,7 @@ const store_name = 'balances';
 export const useBalancesStore = defineStore(store_name, {
     state: (): BalancesState => (balancesInitialState),
     getters: {
-        loggedBalances: state => state.__balances['logged'] ?? [],
+        loggedBalances: state => state.__balances['current'] ?? [],
         currentBalances: state => state.__balances['current'] ?? [],
         getBalances: state => (label: string) => state.__balances[label] ?? [],
     },
@@ -237,7 +237,7 @@ export const useBalancesStore = defineStore(store_name, {
                         if (receipt.status === 1) {
                             const account = useAccountStore().loggedAccount;
                             if (account?.account) {
-                                this.updateBalancesForAccount('logged', account);
+                                this.updateBalancesForAccount('current', account);
                             }
                         }
                         return receipt;
@@ -280,7 +280,7 @@ export const useBalancesStore = defineStore(store_name, {
         async transferTokens(token: TokenClass, to: string, amount: BigNumber, memo?: string): Promise<TransactionResponse> {
             const funcname = 'transferTokens';
             this.trace(funcname, token, to, amount.toString(), memo);
-            const label = 'logged';
+            const label = 'current';
             try {
                 useFeedbackStore().setLoading(funcname);
                 const chain = useChainStore().loggedChain;
@@ -307,7 +307,7 @@ export const useBalancesStore = defineStore(store_name, {
         async wrapSystemTokens(amount: BigNumber): Promise<TransactionResponse> {
             const funcname = 'wrapSystemTokens';
             this.trace(funcname, amount.toString());
-            const label = 'logged';
+            const label = 'current';
             try {
                 useFeedbackStore().setLoading(funcname);
                 const chain = useChainStore().loggedChain;
@@ -331,7 +331,7 @@ export const useBalancesStore = defineStore(store_name, {
         async unwrapSystemTokens(amount: BigNumber): Promise<TransactionResponse> {
             const funcname = 'unwrapSystemTokens';
             this.trace(funcname, amount.toString());
-            const label = 'logged';
+            const label = 'current';
             try {
                 useFeedbackStore().setLoading(funcname);
                 const chain = useChainStore().loggedChain;
@@ -442,9 +442,6 @@ export const useBalancesStore = defineStore(store_name, {
             } else {
                 this.__balances[label] = [...this.__balances[label], balance];
                 this.sortBalances(label);
-                if (useAccountStore().currentIsLogged && label === 'current') {
-                    this.__balances['logged'] = this.__balances[label];
-                }
             }
         },
         updateBalance(label: string, balance: TokenBalance): void {
@@ -456,9 +453,6 @@ export const useBalancesStore = defineStore(store_name, {
                 ) {
                     this.__balances[label][index].balance = balance.amount;
                     this.sortBalances(label);
-                    if (useAccountStore().currentIsLogged && label === 'current') {
-                        this.__balances['logged'] = this.__balances[label];
-                    }
                 }
             }
         },
@@ -468,9 +462,6 @@ export const useBalancesStore = defineStore(store_name, {
             if (index >= 0) {
                 this.__balances[label].splice(index, 1);
             }
-            if (useAccountStore().currentIsLogged && label === 'current') {
-                this.__balances['logged'] = this.__balances[label];
-            }
         },
         clearAllWagmiTokenTransferConfigs(label: Label) {
             this.trace('clearAllWagmiTokenTransferConfigs', label);
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index e22c87ca1..8365dc991 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -103,11 +103,11 @@ const store_name = 'chain';
 export const useChainStore = defineStore(store_name, {
     state: (): ChainState => (chainInitialState),
     getters: {
-        loggedChain: state => state.__chains['logged'],
+        loggedChain: state => state.__chains['current'],
         currentChain: state => state.__chains['current'],
-        loggedEvmChain: state => state.__chains['logged'].settings.isNative() ? undefined : state.__chains['logged'] as EvmChainModel,
+        loggedEvmChain: state => state.__chains['current'].settings.isNative() ? undefined : state.__chains['current'] as EvmChainModel,
         currentEvmChain: state => state.__chains['current'].settings.isNative() ? undefined : state.__chains['current'] as EvmChainModel,
-        loggedNativeChain: state => state.__chains['logged'].settings.isNative() ? state.__chains['logged'] as NativeChainModel : undefined,
+        loggedNativeChain: state => state.__chains['current'].settings.isNative() ? state.__chains['current'] as NativeChainModel : undefined,
         currentNativeChain: state => state.__chains['current'].settings.isNative() ? state.__chains['current'] as NativeChainModel : undefined,
         getChain: state => (label: string) => state.__chains[label],
         getTokens: state => (label: string) => state.__chains[label].tokens,
@@ -198,13 +198,6 @@ export const useChainStore = defineStore(store_name, {
             }
         },
         // Commits ----
-        setLoggedChain(network: string) {
-            this.setChain('current', network);
-            this.setChain('logged', network);
-        },
-        setCurrentChain(network: string) {
-            this.setChain('current', network);
-        },
         setChain(label: string, network: string) {
             this.trace('setChain', label, network);
             if (network in settings) {
diff --git a/src/antelope/stores/evm.ts b/src/antelope/stores/evm.ts
index 15087714e..b1b5f2db5 100644
--- a/src/antelope/stores/evm.ts
+++ b/src/antelope/stores/evm.ts
@@ -474,7 +474,7 @@ export const useEVMStore = defineStore(store_name, {
 
         async getToken(authenticator: EVMAuthenticator, address:string, suspectedType:string): Promise<TokenClass | null> {
             if (suspectedType.toUpperCase() === ERC20_TYPE) {
-                const chain = useChainStore().getChain('logged');
+                const chain = useChainStore().getChain('current');
                 const list = await chain.settings.getTokenList();
                 const token = list.find(t => t.address.toUpperCase() === address.toUpperCase());
                 if (token) {
diff --git a/src/antelope/stores/nfts.ts b/src/antelope/stores/nfts.ts
index 3703d2d14..73026e15d 100644
--- a/src/antelope/stores/nfts.ts
+++ b/src/antelope/stores/nfts.ts
@@ -50,8 +50,8 @@ const store_name = 'nfts';
 export const useNftsStore = defineStore(store_name, {
     state: (): NftsState => (nftsInitialState),
     getters: {
-        loggedInventory: state => state.__inventory['logged']?.list,
-        loggedInventoryLoading: state => state.__inventory['logged']?.loading,
+        loggedInventory: state => state.__inventory['current']?.list,
+        loggedInventoryLoading: state => state.__inventory['current']?.loading,
         getInventory: state => (label: string) => state.__inventory[label],
         getUserFilter: state => state.__user_filter,
         getCollectionList: state => (label: string): NftCollectionListItem[] => {
diff --git a/src/antelope/stores/tokens.ts b/src/antelope/stores/tokens.ts
index 4302f07f2..caa2f4db6 100644
--- a/src/antelope/stores/tokens.ts
+++ b/src/antelope/stores/tokens.ts
@@ -6,7 +6,7 @@ import { defineStore } from 'pinia';
 import {
     Label, TokenClass,
 } from 'src/antelope/types';
-import { getAntelope, useAccountStore, useFeedbackStore, useChainStore } from 'src/antelope';
+import { getAntelope, useFeedbackStore, useChainStore } from 'src/antelope';
 import { toRaw } from 'vue';
 import { errorToString } from 'src/antelope/config';
 import { filter } from 'rxjs';
@@ -22,7 +22,7 @@ const store_name = 'tokens';
 export const useTokensStore = defineStore(store_name, {
     state: (): TokensState => (tokensInitialState),
     getters: {
-        loggedTokens: state => state.__tokens['logged'],
+        loggedTokens: state => state.__tokens['current'],
         currentTokens: state => state.__tokens['current'],
         getTokens: state => (label: string) => state.__tokens[label],
     },
@@ -46,10 +46,6 @@ export const useTokensStore = defineStore(store_name, {
                 let tokens: TokenClass[] = [];
                 tokens = await chain.settings.getTokenList();
                 this.__tokens[label] = tokens;
-                const accountStore = useAccountStore();
-                if (accountStore.currentIsLogged && label === 'current') {
-                    this.__tokens['logged'] = tokens;
-                }
                 this.trace('updateTokensForNetwork', 'token: ', tokens);
             } catch (error) {
                 console.error('Error: ', errorToString(error));
diff --git a/src/antelope/types/Basic.ts b/src/antelope/types/Basic.ts
index 914a35bdf..d1d5b481d 100644
--- a/src/antelope/types/Basic.ts
+++ b/src/antelope/types/Basic.ts
@@ -1,3 +1,3 @@
-export type Label = 'current' | 'logged' | string;
+export type Label = 'current' | string;
 export type Network = 'telos' | 'telos-evm' | string;
 export type Address = string;
diff --git a/src/antelope/wallets/authenticators/EVMAuthenticator.ts b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
index 901a3cd29..6ea6860ed 100644
--- a/src/antelope/wallets/authenticators/EVMAuthenticator.ts
+++ b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
@@ -44,8 +44,7 @@ export abstract class EVMAuthenticator {
         this.trace('login', network);
         const chain = useChainStore();
         try {
-            chain.setLoggedChain(network);
-            chain.setCurrentChain(network);
+            chain.setChain('current', network);
 
             const checkProvider = await this.ensureCorrectChain() as ethers.providers.Web3Provider;
 
diff --git a/src/boot/antelope.ts b/src/boot/antelope.ts
index 07204988c..d1d438432 100644
--- a/src/boot/antelope.ts
+++ b/src/boot/antelope.ts
@@ -97,7 +97,7 @@ export default boot(({ app }) => {
     // Otherwise we just let the store decide which network to connect to
     const network = new URLSearchParams(window.location.search).get('network');
     if (network) {
-        ant.stores.chain.setCurrentChain(network);
+        ant.stores.chain.setChain('current', network);
     }
 
 });
diff --git a/src/pages/demo/SendPageErrors.vue b/src/pages/demo/SendPageErrors.vue
index b5356e9d5..c7bea9c4a 100644
--- a/src/pages/demo/SendPageErrors.vue
+++ b/src/pages/demo/SendPageErrors.vue
@@ -93,7 +93,7 @@ export default defineComponent({
             return this.$q.screen.lt.sm;
         },
         balances(): TokenBalance[] {
-            return ant.stores.balances.getBalances('logged');
+            return ant.stores.balances.getBalances('current');
         },
         showContractLink(): boolean {
             return !!this.token?.address;
diff --git a/src/pages/evm/nfts/NftInventoryPage.vue b/src/pages/evm/nfts/NftInventoryPage.vue
index bcaf14de8..713e9f894 100644
--- a/src/pages/evm/nfts/NftInventoryPage.vue
+++ b/src/pages/evm/nfts/NftInventoryPage.vue
@@ -84,7 +84,7 @@ const { __user_filter: userInventoryFilter } = storeToRefs(nftStore);
 // computed
 const loading = computed(() => nftStore.loggedInventoryLoading || !nftsLoaded.value || Boolean(!collectionList.value.length && nfts.value.length));
 const nftsAndCollectionListLoaded = computed(() => nftsLoaded.value && collectionList.value.length);
-const nfts = computed(() => nftsLoaded.value ? (nftStore.getUserFilteredInventory('logged') as NFTClass[]) : []);
+const nfts = computed(() => nftsLoaded.value ? (nftStore.getUserFilteredInventory('current') as NFTClass[]) : []);
 const nftsToShow = computed(() => {
     const { page, rowsPerPage } = pagination.value;
     const start = page === 1 ? 0 : (page - 1) * rowsPerPage;
@@ -92,7 +92,7 @@ const nftsToShow = computed(() => {
 
     return nfts.value.slice(start, end);
 });
-const collectionList = computed(() => nftStore.getCollectionList('logged') || []);
+const collectionList = computed(() => nftStore.getCollectionList('current') || []);
 const collectionSelectOptions = computed(() => collectionList.value.map(item => item.name));
 const tableRows = computed(() => {
     if (showNftsAsTiles.value) {
@@ -164,7 +164,7 @@ watch(nftsAndCollectionListLoaded, (loaded) => {
 watch(accountStore, (store) => {
     // fetch initial data
     if (store.loggedAccount) {
-        nftStore.updateNFTsForAccount('logged', toRaw(store.loggedAccount)).finally(() => {
+        nftStore.updateNFTsForAccount('current', toRaw(store.loggedAccount)).finally(() => {
             nftsLoaded.value = true;
         });
     }
@@ -295,7 +295,7 @@ let timer: string | number | NodeJS.Timer | undefined;
 onMounted(async () => {
     timer = setInterval(async () => {
         if (accountStore.loggedAccount) {
-            await nftStore.updateNFTsForAccount('logged', accountStore.loggedAccount);
+            await nftStore.updateNFTsForAccount('current', accountStore.loggedAccount);
         }
     }, 13000);
 });
diff --git a/src/pages/evm/wallet/SendPage.vue b/src/pages/evm/wallet/SendPage.vue
index 9aae9d0e0..cdb8e823e 100644
--- a/src/pages/evm/wallet/SendPage.vue
+++ b/src/pages/evm/wallet/SendPage.vue
@@ -114,7 +114,7 @@ export default defineComponent({
             return this.$q.screen.lt.sm;
         },
         balances(): TokenBalance[] {
-            return ant.stores.balances.getBalances('logged');
+            return ant.stores.balances.getBalances('current');
         },
         showContractLink(): boolean {
             return this.token?.address !== NativeCurrencyAddress;
@@ -167,7 +167,7 @@ export default defineComponent({
             return ant.stores.feedback.isLoading('transferEVMTokens') || (this.isFormValid && !this.authIsReadyForTransfer);
         },
         authIsReadyForTransfer(): boolean {
-            return accountStore.getEVMAuthenticator('logged')?.readyForTransfer() ?? false;
+            return accountStore.getEVMAuthenticator('current')?.readyForTransfer() ?? false;
         },
         currencyInputIsLoading() {
             return !(this.token?.decimals && this.token?.symbol);
@@ -222,7 +222,7 @@ export default defineComponent({
         async startTransfer() {
 
             // before sending the transaction, we check if the user is connected to the correct network
-            const label = 'logged';
+            const label = 'current';
             if (!await useAccountStore().isConnectedToCorrectNetwork(label)) {
                 const authenticator = useAccountStore().loggedAccount.authenticator as EVMAuthenticator;
                 const networkName = useChainStore().loggedChain.settings.getDisplay();
diff --git a/src/pages/evm/wrap/UnwrapTab.vue b/src/pages/evm/wrap/UnwrapTab.vue
index ac8e4d1f1..8ddd2a54f 100644
--- a/src/pages/evm/wrap/UnwrapTab.vue
+++ b/src/pages/evm/wrap/UnwrapTab.vue
@@ -75,7 +75,7 @@ onBeforeMount(() => {
 });
 
 async function handleUnwrapClick() {
-    const label = 'logged';
+    const label = 'current';
     if (!await accountStore.isConnectedToCorrectNetwork(label)) {
         const networkName = useChainStore().loggedChain.settings.getDisplay();
         const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
diff --git a/src/pages/evm/wrap/WrapTab.vue b/src/pages/evm/wrap/WrapTab.vue
index 3680889ef..e614bb459 100644
--- a/src/pages/evm/wrap/WrapTab.vue
+++ b/src/pages/evm/wrap/WrapTab.vue
@@ -91,7 +91,7 @@ onBeforeMount(() => {
 });
 
 async function handleCtaClick() {
-    const label = 'logged';
+    const label = 'current';
     if (!await accountStore.isConnectedToCorrectNetwork(label)) {
         const networkName = useChainStore().loggedChain.settings.getDisplay();
         const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
diff --git a/src/pages/home/EVMLoginButtons.vue b/src/pages/home/EVMLoginButtons.vue
index b75d3a477..a803fcb38 100644
--- a/src/pages/home/EVMLoginButtons.vue
+++ b/src/pages/home/EVMLoginButtons.vue
@@ -54,16 +54,16 @@ export default defineComponent({
                 (auth as OreIdAuth).setProvider(provider);
                 selectedOAuthProvider.value = provider;
             }
-            setAuthenticator(name, 'logged');
+            setAuthenticator(name, 'current');
         };
         const setMetamaskAuthenticator = async () => {
-            setAuthenticator('Metamask', 'logged');
+            setAuthenticator('Metamask', 'current');
         };
         const setSafepalAuthenticator = async () => {
-            setAuthenticator('SafePal', 'logged');
+            setAuthenticator('SafePal', 'current');
         };
         const setWalletConnectAuthenticator = async () => {
-            setAuthenticator('WalletConnect', 'logged');
+            setAuthenticator('WalletConnect', 'current');
         };
 
         const setAuthenticator = async(name: string, label: string) => {
diff --git a/src/pages/home/NativeLoginButton.vue b/src/pages/home/NativeLoginButton.vue
index 7e260fdac..04f3f857d 100644
--- a/src/pages/home/NativeLoginButton.vue
+++ b/src/pages/home/NativeLoginButton.vue
@@ -51,7 +51,7 @@ export default defineComponent({
         setDefaultNativeChain() {
             const network = process.env.CHAIN_NAME || 'telos';
             const chainStore = useChainStore();
-            chainStore.setCurrentChain(network);
+            chainStore.setChain('current', network);
         },
         // end of antelope methods
         ...mapActions('account', [
diff --git a/test/jest/__tests__/pages/home/EVMLoginButtons.spec.ts b/test/jest/__tests__/pages/home/EVMLoginButtons.spec.ts
index b92ee077c..18aa84b36 100644
--- a/test/jest/__tests__/pages/home/EVMLoginButtons.spec.ts
+++ b/test/jest/__tests__/pages/home/EVMLoginButtons.spec.ts
@@ -33,7 +33,7 @@ describe('EVMLoginButtons.vue', () => {
             it('should call accountStore loginEVM method 2', () => {
                 const methodSpy = jest.spyOn(storeMock.useAccountStore(), 'loginEVM');
                 wrapper.vm.setMetamaskAuthenticator();
-                const label = 'logged';
+                const label = 'current';
                 const network = storeMock.MockData.Network;
                 wrapper.vm.$nextTick(() => {
                     expect(methodSpy).toHaveBeenCalledWith(expect.objectContaining({
diff --git a/test/jest/utils/antelope/index.ts b/test/jest/utils/antelope/index.ts
index 808228ba9..9d3abc507 100644
--- a/test/jest/utils/antelope/index.ts
+++ b/test/jest/utils/antelope/index.ts
@@ -21,7 +21,7 @@ export const getAntelope = jest.fn().mockImplementation(() => ({
         getAutenticator: () => ({
             newInstance: (label: string) => ({
                 label,
-                isConnectedTo: () => Promise.resolve(label === 'logged'),
+                isConnectedTo: () => Promise.resolve(label === 'current'),
             }),
         }),
     },

From 0cb9063652072c5e955fd6b3762829afaec83bca Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Wed, 6 Sep 2023 13:41:11 -0400
Subject: [PATCH 085/268] add hover preview to nft viewer

---
 src/antelope/stores/platform.ts               |   7 +
 src/css/global/_colors.scss                   |   4 +-
 src/layouts/EVMLayout.vue                     |  20 +
 src/pages/evm/nfts/NftViewer.vue              | 361 +++++++++++++-----
 src/pages/evm/wallet/WalletTransactionRow.vue |   8 +-
 5 files changed, 303 insertions(+), 97 deletions(-)

diff --git a/src/antelope/stores/platform.ts b/src/antelope/stores/platform.ts
index d88a8feef..2a3355808 100644
--- a/src/antelope/stores/platform.ts
+++ b/src/antelope/stores/platform.ts
@@ -26,6 +26,7 @@ export interface PlatformState {
     __is_brave_browser: boolean;
     __is_ios_mobile: boolean;
     __is_mobile: boolean;
+    __evm_nav_is_collapsed: boolean;
 }
 
 const store_name = 'platform';
@@ -94,6 +95,11 @@ export const usePlatformStore = defineStore(store_name, {
                 console.error('Error: ', errorToString(error));
             }
         },
+        setEvmMenuIsCollapsed(value: boolean) {
+            this.trace('setEvmMenuIsLeft', value);
+
+            this.__evm_nav_is_collapsed = value;
+        },
     },
 });
 
@@ -102,4 +108,5 @@ const platformInitialState: PlatformState = {
     __is_brave_browser: false,
     __is_ios_mobile: false,
     __is_mobile: false,
+    __evm_nav_is_collapsed: false,
 };
diff --git a/src/css/global/_colors.scss b/src/css/global/_colors.scss
index 79e9cb4e3..e42a35848 100644
--- a/src/css/global/_colors.scss
+++ b/src/css/global/_colors.scss
@@ -23,7 +23,8 @@ $saveBtn: #2e1f4f;
     $accent-2: #505DCD;
     $accent-3: #DDD1FF;
     $accent-4: #A5A6F6;
-    $page-header: #F7F5FF;
+    $accent-5: #F7F5FF;
+    $page-header: #F7F5FF; // eztodo this
     $site-gradient: linear-gradient(0.4turn, #071033, #6039A4);
     $high-contrast-text-color: #282828;
     $default-contrast-text-color: #4D4D4D;
@@ -43,6 +44,7 @@ $saveBtn: #2e1f4f;
     --accent-color-2: #{$accent-2};
     --accent-color-3: #{$accent-3};
     --accent-color-4: #{$accent-4};
+    --accent-color-5: #{$accent-5};
     --negative-color: #{$negative};
     --positive-color: #{$positive};
     --warning-color-ui: #{$warning};
diff --git a/src/layouts/EVMLayout.vue b/src/layouts/EVMLayout.vue
index aa6798a81..01f07913f 100644
--- a/src/layouts/EVMLayout.vue
+++ b/src/layouts/EVMLayout.vue
@@ -1,5 +1,25 @@
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted } from 'vue';
+import { debounce } from 'quasar';
+
+import { usePlatformStore } from 'src/antelope';
+
 import AppNav from 'components/evm/AppNav.vue';
+
+const platformStore = usePlatformStore();
+
+const resizeListener = debounce(() => {
+    platformStore.setEvmMenuIsCollapsed(window.innerWidth < 1024);
+}, 100);
+
+onMounted(() => {
+    resizeListener();
+    window.addEventListener('resize', resizeListener);
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeListener);
+});
 </script>
 
 <template>
diff --git a/src/pages/evm/nfts/NftViewer.vue b/src/pages/evm/nfts/NftViewer.vue
index adafadb50..f7e13f87f 100644
--- a/src/pages/evm/nfts/NftViewer.vue
+++ b/src/pages/evm/nfts/NftViewer.vue
@@ -20,15 +20,23 @@ const nftTypes = {
     audio: 'audio',
     none: 'none',
 };
+const rootElement = ref<HTMLDivElement | null>(null);
+const iconElement = ref<HTMLDivElement | null>(null);
 
 const videoIsPlaying = ref(false);
 const videoIsAtEnd = ref(false);
 const videoElement = ref<HTMLVideoElement | null>(null);
-let isMediaLoading = ref(true);
-let passedMaxLoadingTime = ref(false);
+const isMediaLoading = ref(true);
+const passedMaxLoadingTime = ref(false);
+const isHovering = ref(false);
 
 // computed
 const isIos = computed(() => platformStore.isIOSMobile);
+const isMobile = computed(() => platformStore.isMobile);
+
+// 'icon mode' is when the nft is displayed as an icon in a list, such as in the NFT inventory in table view
+const isIconMode = computed(() => !props.tileMode && !props.previewMode);
+const showHoverContainer = computed(() => isIconMode.value && isHovering.value);
 
 const nftType = computed(() => {
     if (props.nft.imageSrcFull && !props.nft.audioSrc && !props.nft.videoSrc) {
@@ -113,19 +121,222 @@ function toggleVideoPlay(playOnly?: boolean) {
         videoElement.value.pause();
     }
 }
+
+function calculateHoverPreviewPosition() {
+    const root = rootElement.value;
+    const iconContainerElement = iconElement.value;
+    if (!root || !iconContainerElement) {
+        return;
+    }
+
+    // the height of the chevron on the hover element that points to the root element
+    const chevronHeight = 14;
+    // the minimum padding between the hover element and the border of the window / the edge of the left navbar
+    const padding = 16;
+    // the width of the left nav
+    const leftNavWidth = platformStore.__evm_nav_is_collapsed ? 0 : 300;
+    // the height of the top navbar
+    const navBarHeight = 64;
+    // width of the chevron's base
+    const chevronWidth = 17;
+
+    const iconRect = iconContainerElement.getBoundingClientRect();
+    const iconWidth = iconRect.width;
+    const iconHeight = iconRect.height;
+    const iconElementCenter = {
+        x: iconRect.left + iconWidth / 2,
+        y: iconRect.top + iconHeight / 2,
+    };
+    const hoverElementSize = 278;
+
+    // eztodo make some notes about this logic
+    // eztodo consolidate setproperties
+    const hoverElementWillFitAbove = (iconRect.top > (hoverElementSize + chevronHeight + padding + navBarHeight));
+
+    // the amount that the hover element would be clipped by the left nav / left side of the window
+    const leftClipped = Math.max((leftNavWidth - (iconElementCenter.x - hoverElementSize / 2)), 0);
+    const rightClipped = Math.max((iconElementCenter.x + hoverElementSize / 2) - document.documentElement.clientWidth, 0);
+    const leftOffset = leftClipped ? leftClipped + padding : 0;
+    const rightOffset = rightClipped ? rightClipped + padding : 0;
+
+    // the 'left' value in pixels that has to be set on the chevron to center it over the NFT icon
+    let chevronXOffset = hoverElementSize / 2 - chevronWidth / 2;
+
+    if (leftOffset) {
+        chevronXOffset -= leftOffset;
+    } else if (rightOffset) {
+        chevronXOffset += rightOffset;
+    }
+
+    root.style.setProperty('--hover-preview-x', `${iconElementCenter.x - hoverElementSize / 2 + leftOffset - rightOffset}px`);
+    root.style.setProperty('--hover-preview-chevron-x', `${chevronXOffset}px`);
+
+    if (hoverElementWillFitAbove) {
+        root.style.setProperty('--hover-preview-y', `${iconElementCenter.y - iconHeight/2 - padding - hoverElementSize - 4}px`);
+        root.style.setProperty('--hover-preview-chevron-y', `${hoverElementSize - 13.5}px`);
+        root.style.setProperty('--hover-preview-chevron-rotation', '-45deg');
+
+    } else {
+        root.style.setProperty('--hover-preview-y', `${iconElementCenter.y + iconHeight / 2 + padding}px`);
+        root.style.setProperty('--hover-preview-chevron-y', '-12px');
+        root.style.setProperty('--hover-preview-chevron-rotation', '135deg');
+    }
+}
+
+function setHoverPreviewVisibility(visible: boolean) {
+    if (isMobile.value) {
+        // never show the NFT preview on mobile
+        isHovering.value = false;
+        return;
+    }
+
+    // set position variables
+    // eztodo handle scroll
+    // eztodo only calculate position if hovering
+    calculateHoverPreviewPosition();
+    isHovering.value = visible;
+}
 </script>
 
 <template>
 <div
-    v-if="props.tileMode"
+    ref="rootElement"
     :class="{
         'c-nft-viewer': true,
-        'c-nft-viewer--preview': previewMode,
-        'c-nft-viewer--video': nftType === nftTypes.video,
+        'c-nft-viewer--icon-mode': isIconMode,
     }"
 >
-    <div class="c-nft-viewer__media-container">
-        <div v-if="showCoverImage" class="c-nft-viewer__image-container">
+    <div
+        v-if="props.tileMode"
+        :class="{
+            'c-nft-viewer__nft-container': true,
+            'c-nft-viewer__nft-container--preview': previewMode,
+            'c-nft-viewer__nft-container--video': nftType === nftTypes.video,
+        }"
+    >
+        <div class="c-nft-viewer__media-container">
+            <div v-if="showCoverImage" class="c-nft-viewer__image-container">
+                <q-skeleton v-if="!passedMaxLoadingTime && isMediaLoading" type="rect" class="c-nft-viewer__image-loading" />
+                <img
+                    v-show="!showPlaceholderCoverImage && !isMediaLoading"
+                    :src="nft.imageSrcFull"
+                    :alt="imageAlt"
+                    class="c-nft-viewer__image"
+                    @load="isMediaLoading = false"
+                >
+                <div
+                    v-show="nftType === nftTypes.video && !isMediaLoading"
+                    class="c-nft-viewer__video-container"
+                    tabindex="0"
+                    role="preview"
+                >
+                    <video
+                        ref="videoElement"
+                        :controls="false"
+                        :src="nft.videoSrc"
+                        :poster="nft.imageSrcFull"
+                        playsinline
+                        class="c-nft-viewer__video"
+                        @loadeddata="isMediaLoading = false"
+                    ></video>
+                </div>
+                <q-icon
+                    v-if="passedMaxLoadingTime && isMediaLoading"
+                    :alt="`${$t('nft.broken_image')} ${imageAlt}`"
+                    name="o_broken_image"
+                    size="md"
+                    color="grey-7"
+                    class="c-nft-viewer__image"
+                />
+            </div>
+
+            <div
+                v-else-if="nftType === nftTypes.video"
+                class="c-nft-viewer__video-container"
+                tabindex="0"
+                role="button"
+                :aria-label="$t('nft.play_video')"
+                @click="playVideo"
+                @keypress.space.enter.prevent="toggleVideoPlay(false)"
+            >
+                <video
+                    v-show="!isMediaLoading"
+                    ref="videoElement"
+                    :src="nft.videoSrc"
+                    :controls="videoIsPlaying || isIos"
+                    :poster="nft.imageSrcFull"
+                    playsinline
+                    class="c-nft-viewer__video"
+                    @loadeddata="isMediaLoading = false"
+                    @play="
+                        videoIsPlaying = true;
+                        videoIsAtEnd = false;
+                    "
+                    @pause="
+                        videoIsPlaying = false;
+                        videoIsAtEnd = false;
+                    "
+                    @ended="
+                        videoIsPlaying = false;
+                        videoIsAtEnd = true;
+                    "
+                ></video>
+            </div>
+
+            <template v-if="!isMediaLoading && iconOverlayName">
+                <div class="c-nft-viewer__overlay-icon-bg shadow-2"></div>
+
+                <q-icon
+                    :name="iconOverlayName"
+                    size="lg"
+                    color="primary"
+                    class="c-nft-viewer__overlay-icon"
+                />
+            </template>
+        </div>
+
+        <audio
+            v-if="nftType === nftTypes.audio && !previewMode"
+            controls
+            :src="nft.audioSrc"
+            class="c-nft-viewer__audio"
+        ></audio>
+    </div>
+    <div
+        v-else
+        ref="iconElement"
+        @mouseenter="setHoverPreviewVisibility(true)"
+        @mouseleave="setHoverPreviewVisibility(false)"
+    >
+        <q-skeleton v-if="isMediaLoading && !passedMaxLoadingTime" type="rect" class="c-nft-viewer__list-image" />
+        <q-icon
+            v-else-if="nft.videoSrc && !(isMediaLoading && passedMaxLoadingTime)"
+            name="o_movie"
+            :alt="`${$t('nft.broken_image')} ${imageAlt}`"
+            size="md"
+            color="grey-7"
+            class="c-nft-viewer__list-image"
+        />
+        <q-icon
+            v-else-if="(isMediaLoading && passedMaxLoadingTime) || (!nft.imageSrcFull)"
+            name="o_broken_image"
+            :alt="`${$t('nft.broken_image')} ${imageAlt}`"
+            size="md"
+            color="grey-7"
+            class="c-nft-viewer__list-image"
+        />
+        <img
+            v-show="!isMediaLoading && nft.imageSrcFull"
+            :src="nft.imageSrcFull"
+            :alt="`${$t('nft.collectible')} ${imageAlt}`"
+            class="c-nft-viewer__list-image"
+            height="40"
+            width="40"
+            @load="isMediaLoading = false"
+        >
+    </div>
+    <div v-if="showHoverContainer" class="c-nft-viewer__hover-container shadow-3">
+        <div class="c-nft-viewer__image-container">
             <q-skeleton v-if="!passedMaxLoadingTime && isMediaLoading" type="rect" class="c-nft-viewer__image-loading" />
             <img
                 v-show="!showPlaceholderCoverImage && !isMediaLoading"
@@ -146,6 +357,8 @@ function toggleVideoPlay(playOnly?: boolean) {
                     :src="nft.videoSrc"
                     :poster="nft.imageSrcFull"
                     playsinline
+                    autoplay
+                    muted
                     class="c-nft-viewer__video"
                     @loadeddata="isMediaLoading = false"
                 ></video>
@@ -159,99 +372,38 @@ function toggleVideoPlay(playOnly?: boolean) {
                 class="c-nft-viewer__image"
             />
         </div>
-
-        <div
-            v-else-if="nftType === nftTypes.video"
-            class="c-nft-viewer__video-container"
-            tabindex="0"
-            role="button"
-            :aria-label="$t('nft.play_video')"
-            @click="playVideo"
-            @keypress.space.enter.prevent="toggleVideoPlay(false)"
-        >
-            <video
-                v-show="!isMediaLoading"
-                ref="videoElement"
-                :src="nft.videoSrc"
-                :controls="videoIsPlaying || isIos"
-                :poster="nft.imageSrcFull"
-                playsinline
-                class="c-nft-viewer__video"
-                @loadeddata="isMediaLoading = false"
-                @play="
-                    videoIsPlaying = true;
-                    videoIsAtEnd = false;
-                "
-                @pause="
-                    videoIsPlaying = false;
-                    videoIsAtEnd = false;
-                "
-                @ended="
-                    videoIsPlaying = false;
-                    videoIsAtEnd = true;
-                "
-            ></video>
-        </div>
-
-        <template v-if="!isMediaLoading && iconOverlayName">
-            <div class="c-nft-viewer__overlay-icon-bg shadow-2"></div>
-
-            <q-icon
-                :name="iconOverlayName"
-                size="lg"
-                color="primary"
-                class="c-nft-viewer__overlay-icon"
-            />
-        </template>
     </div>
-
-    <audio
-        v-if="nftType === nftTypes.audio && !previewMode"
-        controls
-        :src="nft.audioSrc"
-        class="c-nft-viewer__audio"
-    ></audio>
 </div>
-<template v-else>
-    <q-skeleton v-if="isMediaLoading && !passedMaxLoadingTime" type="rect" class="c-nft-viewer__list-image" />
-    <q-icon
-        v-else-if="isMediaLoading && passedMaxLoadingTime"
-        name="o_broken_image"
-        :alt="`${$t('nft.broken_image')} ${imageAlt}`"
-        size="md"
-        color="grey-7"
-        class="c-nft-viewer__list-image"
-    />
-    <img
-        v-show="!isMediaLoading"
-        :src="nft.imageSrcFull"
-        :alt="`${$t('nft.collectible')} ${imageAlt}`"
-        class="c-nft-viewer__list-image"
-        height="40"
-        width="40"
-        @load="isMediaLoading = false"
-    >
-</template>
+
 </template>
 <style lang="scss">
 .c-nft-viewer {
     $this: &;
-
-    position: relative;
-    display: flex;
-    flex-direction: column;
+    $list-icon-size: 40px;
     height: 100%;
-    width: 100%;
-    gap: 8px;
 
-    &--preview {
-        max-height: 270px;
+    &--icon-mode {
+        height: $list-icon-size;
+        width: $list-icon-size;
     }
 
-    &--video:hover:not(#{$this}--preview) {
-        #{$this}__overlay-icon-bg,
-        #{$this}__overlay-icon {
-            transform: scale(1.1);
+    &__nft-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+        gap: 8px;
+
+        &--preview {
+            max-height: 270px;
+        }
+
+        &--video:hover:not(#{$this}--preview) {
+            #{$this}__overlay-icon-bg,
+            #{$this}__overlay-icon {
+                transform: scale(1.1);
+            }
         }
     }
 
@@ -291,8 +443,8 @@ function toggleVideoPlay(playOnly?: boolean) {
 
     &__list-image {
         border-radius: 4px;
-        height: 40px;
-        width: 40px;
+        height: $list-icon-size;
+        width: $list-icon-size;
     }
 
     &__overlay-icon-bg,
@@ -352,5 +504,30 @@ function toggleVideoPlay(playOnly?: boolean) {
         display: block;
         flex-shrink: 0;
     }
+
+    &__hover-container {
+        position: fixed;
+        height: 278px;
+        width: 278px;
+        left: var(--hover-preview-x);
+        top: var(--hover-preview-y);
+        background: var(--accent-color-5);
+        z-index: 9999; // eztodo this
+        border-radius: 4px;
+        padding: 8px;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: var(--hover-preview-chevron-y);
+            left: var(--hover-preview-chevron-x);
+            transform: rotate(var(--hover-preview-chevron-rotation));
+            height: 24px;
+            width: 24px;
+            background: linear-gradient(45deg, var(--accent-color-5) 50%, transparent 50%);
+            z-index: -1;
+            box-shadow: -3px 4px 5px -4px rgba(0,0,0,0.6);
+        }
+    }
 }
 </style>
diff --git a/src/pages/evm/wallet/WalletTransactionRow.vue b/src/pages/evm/wallet/WalletTransactionRow.vue
index e50ad7b85..9600206d4 100644
--- a/src/pages/evm/wallet/WalletTransactionRow.vue
+++ b/src/pages/evm/wallet/WalletTransactionRow.vue
@@ -39,7 +39,7 @@ export default defineComponent({
     },
     data: () => ({
         loading: true,
-        nftData: {} as Record<string, NFTClass>, // keyed like {contract address}-{tokenId}
+        nftData: {} as Record<string, NFTClass>, // keyed like {contract address lowercase}-{tokenId}
     }),
     computed: {
         fiatLocale(): string {
@@ -157,7 +157,7 @@ export default defineComponent({
                         nftTransfer.nftInterface,
                     );
                     if (nftDetails) {
-                        this.nftData[`${nftTransfer.collectionAddress}-${nftTransfer.tokenId}`] = nftDetails;
+                        this.nftData[`${nftTransfer.collectionAddress.toLowerCase()}-${nftTransfer.tokenId}`] = nftDetails;
                     }
                 },
             ));
@@ -195,7 +195,7 @@ export default defineComponent({
             return truncateAddress(address);
         },
         getCachedNftData(collectionAddress: string, tokenId: string): NFTClass | undefined {
-            return this.nftData[`${collectionAddress}-${tokenId}`];
+            return this.nftData[`${collectionAddress.toLowerCase()}-${tokenId}`];
         },
     },
 });
@@ -319,7 +319,7 @@ export default defineComponent({
             </div>
         </div>
 
-        <!-- eztodo scroll up when changing rowsperpage or page number -->
+        <!-- eztodo scroll up when changing rowsperpage or page number, revert all changes here -->
         <div
             v-for="(values, index) in transaction.valuesIn"
             :key="`values-in-${index}`"

From d96e78fea3611d5a1d6df98dc901c106676c2add Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Wed, 6 Sep 2023 19:14:12 -0400
Subject: [PATCH 086/268] WIP fixing multiple calls behavior

---
 src/antelope/stores/history.ts                | 50 ++++++++++++-------
 src/antelope/stores/utils/store-utils.ts      |  1 +
 .../evm/wallet/WalletTransactionsTab.vue      | 42 ++++++++--------
 .../antelope/stores/utils/store-utils.spec.ts | 18 +++++++
 4 files changed, 73 insertions(+), 38 deletions(-)

diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 4b9edaf0f..57ff43bec 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -62,7 +62,7 @@ export interface HistoryState {
     __evm_transactions_pagination_data: {
         [label: Label]: EVMTransactionsPaginationData,
     },
-    __evm_transfers: {
+    __evm_nft_transfers: {
         [label: Label]: {
             transfers: EvmTransfer[],
         },
@@ -71,6 +71,10 @@ export interface HistoryState {
 
 const store_name = 'history';
 
+let fetchAccoutTransactionsIsRunning = false;
+let shouldRefetchAccoutTransactions = false;
+// let fetchNftTransfersQueued: null | { label: Label, account: string } = null;
+
 export const useHistoryStore = defineStore(store_name, {
     state: (): HistoryState => (historyInitialState),
     getters: {
@@ -79,7 +83,7 @@ export const useHistoryStore = defineStore(store_name, {
         getShapedTransactionRows: state => (label: Label): ShapedTransactionRow[] => state.__shaped_evm_transaction_rows[label],
         getEVMTransactionsPagination: state => (label: Label): EVMTransactionsPaginationData => state.__evm_transactions_pagination_data[label],
         getEvmTransactionsRowCount: state => (label: Label): number => state.__total_evm_transaction_count[label],
-        getEVMTransfers: state => (label: Label): EvmTransfer[] => state.__evm_transfers[label].transfers,
+        getEVMTransfers: state => (label: Label): EvmTransfer[] => state.__evm_nft_transfers[label].transfers,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -99,17 +103,26 @@ export const useHistoryStore = defineStore(store_name, {
         async fetchEVMTransactionsForAccount(label: Label = 'current') {
             this.trace('fetchEVMTransactionsForAccount', label);
             const feedbackStore = useFeedbackStore();
+
+            if (!fetchAccoutTransactionsIsRunning) {
+                feedbackStore.setLoading('history.fetchEVMTransactionsForAccount');
+                fetchAccoutTransactionsIsRunning = true;
+            } else {
+                shouldRefetchAccoutTransactions = true;
+                return;
+            }
+
             const chain = useChainStore().getChain(label);
             const chain_settings = chain.settings as EVMChainSettings;
             const contractStore = useContractStore();
 
-            feedbackStore.setLoading('history.fetchEVMTransactionsForAccount');
 
             try {
+                shouldRefetchAccoutTransactions = false;
                 // eztodo where to debounce?
                 // for NFTs (ERC1155 and ERC721), we need to fetch information from the transfers endpoint,
                 // which returns data required for the UI
-                if (!this.__evm_transfers[label].transfers.length) {
+                if (!this.__evm_nft_transfers[label].transfers.length) {
                     await this.fetchEvmNftTransfersForAccount(label, this.__evm_filter.address);
                 }
 
@@ -136,17 +149,17 @@ export const useHistoryStore = defineStore(store_name, {
                 this.setEVMTransactions(label, transactions);
 
                 await this.shapeTransactions(label, transactions);
-
-                // there's an instant between this point and the appearance of the first transaction to show
-                // so we add a small delay to avoid flickering
-                // eztodo verify this is necessary
-                setTimeout(() => {
-                    feedbackStore.unsetLoading('history.fetchEVMTransactionsForAccount');
-                }, 500);
             } catch (error) {
-                feedbackStore.unsetLoading('history.fetchEVMTransactionsForAccount');
                 console.error(error);
                 throw new AntelopeError('antelope.history.error_fetching_transactions');
+            } finally {
+                fetchAccoutTransactionsIsRunning = false;
+
+                if (shouldRefetchAccoutTransactions) {
+                    await this.fetchEVMTransactionsForAccount(label);
+                } else {
+                    feedbackStore.unsetLoading('history.fetchEVMTransactionsForAccount');
+                }
             }
         },
 
@@ -156,8 +169,9 @@ export const useHistoryStore = defineStore(store_name, {
             const feedbackStore = useFeedbackStore();
             const contractStore = useContractStore();
 
-            this.trace('fetchEVMTransfersForAccount', label);
-            feedbackStore.setLoading('history.fetchEVMTransfersForAccount');
+            this.trace('fetchEvmNftTransfersForAccount', label);
+
+            feedbackStore.setLoading('history.fetchEvmNftTransfersForAccount');
 
             const chainSettings = useChainStore().getChain(label).settings as EVMChainSettings;
 
@@ -206,7 +220,7 @@ export const useHistoryStore = defineStore(store_name, {
                 // eztodo this error localization
                 throw new AntelopeError('antelope.history.error_fetching_transfers');
             } finally {
-                feedbackStore.unsetLoading('history.fetchEVMTransfersForAccount');
+                feedbackStore.unsetLoading('history.fetchEvmNftTransfersForAccount');
             }
         },
 
@@ -228,7 +242,7 @@ export const useHistoryStore = defineStore(store_name, {
             // this request https://api.teloscan.io/v1/account/0x13B745FC35b0BAC9bab9fD20B7C9f46668232607/transfers?type=erc721&limit=9999999&offset=0&includePagination=false&includeAbi=false
             // response is 70kb and took 2 seconds
 
-            const allNftTransfers = this.__evm_transfers[label].transfers;
+            const allNftTransfers = this.__evm_nft_transfers[label].transfers;
 
             const transactionShapePromises = transactions.map(async (tx) => {
                 const erc20Transfers = await contractStore.getErc20TransfersFromTransaction(tx);
@@ -452,7 +466,7 @@ export const useHistoryStore = defineStore(store_name, {
         },
         setEVMTransfers(label: Label, transfers: EvmTransfer[]) {
             this.trace('setEVMTransfers', transfers);
-            this.__evm_transfers[label].transfers = transfers;
+            this.__evm_nft_transfers[label].transfers = transfers;
         },
         clearEVMTansfers() {
             this.trace('clearEVMTansfers');
@@ -477,7 +491,7 @@ const historyInitialState: HistoryState = {
         current: [],
     },
     __evm_transactions_pagination_data: {},
-    __evm_transfers: {
+    __evm_nft_transfers: {
         current: {
             transfers: [],
         },
diff --git a/src/antelope/stores/utils/store-utils.ts b/src/antelope/stores/utils/store-utils.ts
index 854d64569..96de02e52 100644
--- a/src/antelope/stores/utils/store-utils.ts
+++ b/src/antelope/stores/utils/store-utils.ts
@@ -33,6 +33,7 @@
  * console.log(callCounter); // 1
  */
 // eztodo document how this should be used in the context of a store or object, like with the function ()... rather than arrow function
+// eztodo remove?
 export function debounceAsync<Context, Args extends Array<unknown>, FnReturnType>(
     func: (this: Context, ...args: Args) => Promise<FnReturnType> | FnReturnType,
     wait: number,
diff --git a/src/pages/evm/wallet/WalletTransactionsTab.vue b/src/pages/evm/wallet/WalletTransactionsTab.vue
index b6cd358d5..6201a3f57 100644
--- a/src/pages/evm/wallet/WalletTransactionsTab.vue
+++ b/src/pages/evm/wallet/WalletTransactionsTab.vue
@@ -25,8 +25,8 @@ export default defineComponent({
             rowsNumber: 0,
         },
         errorsFound: false,
-        hideLoadingState: false,
         fetchTransactionsInterval: null as null | ReturnType<typeof setInterval>,
+        initialLoadComplete: false,
     }),
     computed: {
         doLiveUpdate() {
@@ -38,8 +38,14 @@ export default defineComponent({
         loading() {
             // eztodo when loading balances tab then clicking transactions tab, it says "showing 5 of 0 transactions"
             const txLoading = feedbackStore.isLoading('history.fetchEVMTransactionsForAccount');
-            const transfersLoading = feedbackStore.isLoading('history.fetchEVMTransfersForAccount');
-            return (txLoading || transfersLoading) && !this.hideLoadingState;
+            const transfersLoading = feedbackStore.isLoading('history.fetchEvmNftTransfersForAccount');
+            const actionsInProgress = txLoading || transfersLoading;
+            const hideLoadingState = this.pagination.page === 1 && this.initialLoadComplete;
+
+            // don't show the loading state if we're on the first page and transactions are already present
+            // this covers two scenarios, 1. the user came to the page from the balances page, meaning we prefetched transactions
+            // or 2. the user is on the first page and we are re-fetching transactions on an interval
+            return actionsInProgress && !hideLoadingState;
         },
         address() {
             return accountStore.loggedEvmAccount?.address ?? '';
@@ -69,6 +75,8 @@ export default defineComponent({
         address() {
             // address can be initially undefined; wait to load txs until it's defined
             // also reload txs if the user switches accounts
+            console.log('getting txs from addy change'); // eztodo
+
             this.getTransactions();
         },
         pagination() {
@@ -76,26 +84,23 @@ export default defineComponent({
         },
     },
     created() {
-        if (this.shapedTransactions.length > 0) {
-            this.hideLoadingState = true;
+        if (this.shapedTransactions.length) {
+            this.initialLoadComplete = true;
         }
 
         // eztodo add interval for transfers
         this.fetchTransactionsInterval = setInterval(() => {
             if (this.doLiveUpdate) {
-                if (this.shapedTransactions.length > 0) {
-                    this.hideLoadingState = true;
-                }
+                // eztodo
+                console.log('getting txs from interval');
 
-                this.getTransactions().finally(() => {
-                    this.enableLoadingState();
-                });
+                this.getTransactions();
             }
         }, 13000);
 
-        this.getTransactions().finally(() => {
-            this.enableLoadingState();
-        });
+        // this.getTransactions().finally(() => {
+        //     this.initialLoadComplete = true;
+        // });
     },
     unmounted() {
         if (this.fetchTransactionsInterval) {
@@ -103,13 +108,9 @@ export default defineComponent({
         }
     },
     methods: {
-        enableLoadingState() {
-            // a timeout of 500ms is used in the history store to prevent the loading state from flashing; account for that here
-            setTimeout(() => {
-                this.hideLoadingState = false;
-            }, 550);
-        },
         async getTransactions() {
+            console.log('getTransactions');
+
             const offset = (this.pagination.page - 1) * this.pagination.rowsPerPage;
             let limit = this.pagination.rowsPerPage;
 
@@ -135,6 +136,7 @@ export default defineComponent({
                     }
                     await historyStore.fetchEVMTransactionsForAccount('current');
                     this.pagination.rowsNumber = historyStore.getEvmTransactionsRowCount('current');
+                    this.initialLoadComplete = true;
                 } catch (e) {
                     if (e instanceof AntelopeError) {
                         getAntelope().config.notifyFailureMessage(e.message, e.payload);
diff --git a/test/jest/__tests__/antelope/stores/utils/store-utils.spec.ts b/test/jest/__tests__/antelope/stores/utils/store-utils.spec.ts
index 73c393860..6283d4103 100644
--- a/test/jest/__tests__/antelope/stores/utils/store-utils.spec.ts
+++ b/test/jest/__tests__/antelope/stores/utils/store-utils.spec.ts
@@ -94,4 +94,22 @@ describe('debounceAsync', () => {
         expect(await firstCall).toBe(returnValue.concat('two'));
         expect(await secondCall).toBe(returnValue.concat('two'));
     });
+
+    it('should properly handle the "this" context of the caller', async () => {
+        const ID = '123';
+        const testObject = {
+            id: ID,
+            debouncedMethod: debounceAsync(async function (this: { id: string }, str: string) {
+                return this.id.concat(str);
+            }, 1000),
+        };
+
+        const firstCall = testObject.debouncedMethod('abc');
+        jest.advanceTimersByTime(100);
+        const secondCall = testObject.debouncedMethod('xyz');
+        jest.advanceTimersByTime(3000);
+
+        expect(await firstCall).toBe(ID.concat('xyz'));
+        expect(await secondCall).toBe(ID.concat('xyz'));
+    });
 });

From 494ce51522811def0beffc9dde30532ea4732520 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 7 Sep 2023 10:39:27 -0300
Subject: [PATCH 087/268] changing the "current" label for a constant

---
 src/antelope/index.ts                         |  6 +++-
 src/antelope/stores/account.ts                | 35 ++++++++++---------
 src/antelope/stores/balances.ts               | 17 ++++-----
 src/antelope/stores/chain.ts                  | 13 +++----
 src/antelope/stores/evm.ts                    |  3 +-
 src/antelope/stores/history.ts                | 12 +++----
 src/antelope/stores/nfts.ts                   |  6 ++--
 src/antelope/stores/tokens.ts                 |  8 ++---
 src/antelope/types/Basic.ts                   |  2 +-
 .../authenticators/EVMAuthenticator.ts        |  4 +--
 src/boot/antelope.ts                          |  4 +--
 src/pages/demo/SendPageErrors.vue             |  4 +--
 src/pages/evm/nfts/NftDetailsPage.vue         |  4 +--
 src/pages/evm/nfts/NftInventoryPage.vue       | 10 +++---
 src/pages/evm/wallet/SendPage.vue             |  8 ++---
 src/pages/evm/wallet/WalletPage.vue           |  4 +--
 .../evm/wallet/WalletTransactionsTab.vue      |  8 ++---
 src/pages/evm/wrap/UnwrapTab.vue              |  4 +--
 src/pages/evm/wrap/WrapTab.vue                |  3 +-
 src/pages/home/EVMLoginButtons.vue            | 10 +++---
 src/pages/home/NativeLoginButton.vue          |  4 +--
 .../pages/home/EVMLoginButtons.spec.ts        |  3 +-
 test/jest/utils/antelope/index.ts             |  4 ++-
 23 files changed, 94 insertions(+), 82 deletions(-)

diff --git a/src/antelope/index.ts b/src/antelope/index.ts
index 51701c581..f7c27e6d9 100644
--- a/src/antelope/index.ts
+++ b/src/antelope/index.ts
@@ -80,7 +80,7 @@ export class Antelope {
                 console.error('No chain name specified in environment config; the application will not run correctly');
             } else {
                 const network: string = chainNetworkNames[process.env.CHAIN_NAME];
-                chainStore.setChain('current', network);
+                chainStore.setChain(CURRENT_CONTEXT, network);
             }
         }
 
@@ -142,3 +142,7 @@ export { usePlatformStore } from 'src/antelope/stores/platform';
 export { useEVMStore } from 'src/antelope/stores/evm';
 export { useNftsStore } from 'src/antelope/stores/nfts';
 
+// this constant is used for a temporal workaround for the multi-context issue
+// https://github.com/telosnetwork/telos-wallet/issues/582
+
+export const CURRENT_CONTEXT = 'current';
diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index 7c8156fc7..94dcd3a59 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -19,6 +19,7 @@ import { API } from '@greymass/eosio';
 import { createInitFunction, createTraceFunction } from 'src/antelope/stores/feedback';
 import { initFuelUserWrapper } from 'src/api/fuel';
 import {
+    CURRENT_CONTEXT,
     useBalancesStore,
     useFeedbackStore,
     useHistoryStore,
@@ -91,19 +92,19 @@ const store_name = 'account';
 export const useAccountStore = defineStore(store_name, {
     state: (): AccountState => (accountInitialState),
     getters: {
-        isAuthenticated: state => !!state.__accounts['current'],
-        loggedAccount: state => state.__accounts['current'],
-        loggedIsNative: state => state.__accounts['current']?.isNative,
-        loggedEvmAccount: state => (state.__accounts['current']?.isNative ?
-            null : state.__accounts['current']) as EvmAccountModel,
-        loggedNativeAccount: state => (state.__accounts['current']?.isNative ?
-            state.__accounts['current'] : null) as NativeAccountModel,
-        currentAccount: state => ({ ...state.__accounts['current'] }),
-        currentEvmAccount: state => (state.__accounts['current']?.isNative ?
-            null : state.__accounts['current']) as EvmAccountModel,
+        isAuthenticated: state => !!state.__accounts[CURRENT_CONTEXT],
+        loggedAccount: state => state.__accounts[CURRENT_CONTEXT],
+        loggedIsNative: state => state.__accounts[CURRENT_CONTEXT]?.isNative,
+        loggedEvmAccount: state => (state.__accounts[CURRENT_CONTEXT]?.isNative ?
+            null : state.__accounts[CURRENT_CONTEXT]) as EvmAccountModel,
+        loggedNativeAccount: state => (state.__accounts[CURRENT_CONTEXT]?.isNative ?
+            state.__accounts[CURRENT_CONTEXT] : null) as NativeAccountModel,
+        currentAccount: state => ({ ...state.__accounts[CURRENT_CONTEXT] }),
+        currentEvmAccount: state => (state.__accounts[CURRENT_CONTEXT]?.isNative ?
+            null : state.__accounts[CURRENT_CONTEXT]) as EvmAccountModel,
         currentIsLogged: state =>
-            state.__accounts['current']?.account === state.__accounts['current']?.account &&
-            state.__accounts['current']?.network === state.__accounts['current']?.network,
+            state.__accounts[CURRENT_CONTEXT]?.account === state.__accounts[CURRENT_CONTEXT]?.account &&
+            state.__accounts[CURRENT_CONTEXT]?.network === state.__accounts[CURRENT_CONTEXT]?.network,
         getAccount: state => (label: Label) => ({ ...state.__accounts[label] }),
         getAuthenticator: state => (label: Label) => state.__accounts[label]?.authenticator,
         getEVMAuthenticator: state => (label: Label) => state.__accounts[label]?.authenticator as EVMAuthenticator,
@@ -142,7 +143,7 @@ export const useAccountStore = defineStore(store_name, {
                     localStorage.setItem('autoLogin', authenticator.getName());
 
                     success = true;
-                    this.fetchAccountDataFor('current', nativeAccount);
+                    this.fetchAccountDataFor(CURRENT_CONTEXT, nativeAccount);
                     getAntelope().events.onLoggedIn.next(nativeAccount);
                 }
             } catch (error) {
@@ -187,7 +188,7 @@ export const useAccountStore = defineStore(store_name, {
                     localStorage.setItem('isNative', 'false');
                     localStorage.setItem('autoLogin', authenticator.getName());
                     success = true;
-                    this.fetchAccountDataFor('current', evmAccount);
+                    this.fetchAccountDataFor(CURRENT_CONTEXT, evmAccount);
                     getAntelope().events.onLoggedIn.next(evmAccount);
                 } else {
                     console.error('Error: ', 'EVM login failed??');
@@ -213,7 +214,7 @@ export const useAccountStore = defineStore(store_name, {
                 localStorage.removeItem('isNative');
                 localStorage.removeItem('autoLogin');
 
-                const logged = this.__accounts['current'];
+                const logged = this.__accounts[CURRENT_CONTEXT];
                 const { authenticator } = logged;
                 try {
                     authenticator && (await authenticator.logout());
@@ -232,7 +233,7 @@ export const useAccountStore = defineStore(store_name, {
 
         async autoLogin(): Promise<boolean> {
             this.trace('autoLogin');
-            const label = 'current';
+            const label = CURRENT_CONTEXT;
             try {
                 useFeedbackStore().setLoading('account.autoLogin');
                 const network = localStorage.getItem('network');
@@ -335,7 +336,7 @@ export const useAccountStore = defineStore(store_name, {
         // commits -------
         setAccount(account: AccountModel | null) {
             this.trace('setAccount', account);
-            const label = 'current';
+            const label = CURRENT_CONTEXT;
             const before = `${this.__accounts[label]?.account ?? ''} ${this.__accounts[label]?.network ?? ''}`;
             try {
                 if (account) {
diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 363e319c2..94c015c7d 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -36,6 +36,7 @@ import {
     useChainStore,
     useEVMStore,
     usePlatformStore,
+    CURRENT_CONTEXT,
 } from 'src/antelope';
 import { formatWei } from 'src/antelope/stores/utils';
 import { BigNumber, ethers } from 'ethers';
@@ -62,8 +63,8 @@ const store_name = 'balances';
 export const useBalancesStore = defineStore(store_name, {
     state: (): BalancesState => (balancesInitialState),
     getters: {
-        loggedBalances: state => state.__balances['current'] ?? [],
-        currentBalances: state => state.__balances['current'] ?? [],
+        loggedBalances: state => state.__balances[CURRENT_CONTEXT] ?? [],
+        currentBalances: state => state.__balances[CURRENT_CONTEXT] ?? [],
         getBalances: state => (label: string) => state.__balances[label] ?? [],
     },
     actions: {
@@ -74,7 +75,7 @@ export const useBalancesStore = defineStore(store_name, {
                 filter(({ label, account }) => !!label && !!account),
             ).subscribe({
                 next: async ({ label, account }) => {
-                    if (label === 'current') {
+                    if (label === CURRENT_CONTEXT) {
                         await useBalancesStore().updateBalancesForAccount(label, toRaw(account));
                     }
                 },
@@ -82,7 +83,7 @@ export const useBalancesStore = defineStore(store_name, {
 
             // update logged balances every 10 seconds
             setInterval(async () => {
-                await useBalancesStore().updateBalancesForAccount('current', useAccountStore().loggedAccount);
+                await useBalancesStore().updateBalancesForAccount(CURRENT_CONTEXT, useAccountStore().loggedAccount);
             }, 10000);
         },
         async updateBalancesForAccount(label: string, account: AccountModel | null) {
@@ -237,7 +238,7 @@ export const useBalancesStore = defineStore(store_name, {
                         if (receipt.status === 1) {
                             const account = useAccountStore().loggedAccount;
                             if (account?.account) {
-                                this.updateBalancesForAccount('current', account);
+                                this.updateBalancesForAccount(CURRENT_CONTEXT, account);
                             }
                         }
                         return receipt;
@@ -280,7 +281,7 @@ export const useBalancesStore = defineStore(store_name, {
         async transferTokens(token: TokenClass, to: string, amount: BigNumber, memo?: string): Promise<TransactionResponse> {
             const funcname = 'transferTokens';
             this.trace(funcname, token, to, amount.toString(), memo);
-            const label = 'current';
+            const label = CURRENT_CONTEXT;
             try {
                 useFeedbackStore().setLoading(funcname);
                 const chain = useChainStore().loggedChain;
@@ -307,7 +308,7 @@ export const useBalancesStore = defineStore(store_name, {
         async wrapSystemTokens(amount: BigNumber): Promise<TransactionResponse> {
             const funcname = 'wrapSystemTokens';
             this.trace(funcname, amount.toString());
-            const label = 'current';
+            const label = CURRENT_CONTEXT;
             try {
                 useFeedbackStore().setLoading(funcname);
                 const chain = useChainStore().loggedChain;
@@ -331,7 +332,7 @@ export const useBalancesStore = defineStore(store_name, {
         async unwrapSystemTokens(amount: BigNumber): Promise<TransactionResponse> {
             const funcname = 'unwrapSystemTokens';
             this.trace(funcname, amount.toString());
-            const label = 'current';
+            const label = CURRENT_CONTEXT;
             try {
                 useFeedbackStore().setLoading(funcname);
                 const chain = useChainStore().loggedChain;
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 8365dc991..9febcf172 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -17,6 +17,7 @@
 
 import { defineStore } from 'pinia';
 import {
+    CURRENT_CONTEXT,
     useFeedbackStore,
 } from 'src/antelope';
 
@@ -103,12 +104,12 @@ const store_name = 'chain';
 export const useChainStore = defineStore(store_name, {
     state: (): ChainState => (chainInitialState),
     getters: {
-        loggedChain: state => state.__chains['current'],
-        currentChain: state => state.__chains['current'],
-        loggedEvmChain: state => state.__chains['current'].settings.isNative() ? undefined : state.__chains['current'] as EvmChainModel,
-        currentEvmChain: state => state.__chains['current'].settings.isNative() ? undefined : state.__chains['current'] as EvmChainModel,
-        loggedNativeChain: state => state.__chains['current'].settings.isNative() ? state.__chains['current'] as NativeChainModel : undefined,
-        currentNativeChain: state => state.__chains['current'].settings.isNative() ? state.__chains['current'] as NativeChainModel : undefined,
+        loggedChain: state => state.__chains[CURRENT_CONTEXT],
+        currentChain: state => state.__chains[CURRENT_CONTEXT],
+        loggedEvmChain: state => state.__chains[CURRENT_CONTEXT].settings.isNative() ? undefined : state.__chains[CURRENT_CONTEXT] as EvmChainModel,
+        currentEvmChain: state => state.__chains[CURRENT_CONTEXT].settings.isNative() ? undefined : state.__chains[CURRENT_CONTEXT] as EvmChainModel,
+        loggedNativeChain: state => state.__chains[CURRENT_CONTEXT].settings.isNative() ? state.__chains[CURRENT_CONTEXT] as NativeChainModel : undefined,
+        currentNativeChain: state => state.__chains[CURRENT_CONTEXT].settings.isNative() ? state.__chains[CURRENT_CONTEXT] as NativeChainModel : undefined,
         getChain: state => (label: string) => state.__chains[label],
         getTokens: state => (label: string) => state.__chains[label].tokens,
         // TODO: remove the 'as EVMChainSettings' when the native chains are implemented
diff --git a/src/antelope/stores/evm.ts b/src/antelope/stores/evm.ts
index b1b5f2db5..684bca268 100644
--- a/src/antelope/stores/evm.ts
+++ b/src/antelope/stores/evm.ts
@@ -40,6 +40,7 @@ import {
 } from 'src/antelope/types';
 import { toRaw } from 'vue';
 import {
+    CURRENT_CONTEXT,
     getAntelope,
     useAccountStore,
     useChainStore,
@@ -474,7 +475,7 @@ export const useEVMStore = defineStore(store_name, {
 
         async getToken(authenticator: EVMAuthenticator, address:string, suspectedType:string): Promise<TokenClass | null> {
             if (suspectedType.toUpperCase() === ERC20_TYPE) {
-                const chain = useChainStore().getChain('current');
+                const chain = useChainStore().getChain(CURRENT_CONTEXT);
                 const list = await chain.settings.getTokenList();
                 const token = list.find(t => t.address.toUpperCase() === address.toUpperCase());
                 if (token) {
diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 7db9569bc..740eff898 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -32,7 +32,7 @@ import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { useChainStore } from 'src/antelope/stores/chain';
 import { toRaw } from 'vue';
 import { BigNumber } from 'ethers';
-import { getAntelope, useContractStore, useUserStore } from '..';
+import { CURRENT_CONTEXT, getAntelope, useContractStore, useUserStore } from '..';
 import { formatUnits } from 'ethers/lib/utils';
 import { getGasInTlos, WEI_PRECISION } from 'src/antelope/stores/utils';
 import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
@@ -84,7 +84,7 @@ export const useHistoryStore = defineStore(store_name, {
         },
 
         // actions ---
-        async fetchEVMTransactionsForAccount(label: Label = 'current') {
+        async fetchEVMTransactionsForAccount(label: Label = CURRENT_CONTEXT) {
             this.trace('fetchEVMTransactionsForAccount', label);
             const feedbackStore = useFeedbackStore();
             const chain = useChainStore().getChain(label);
@@ -130,7 +130,7 @@ export const useHistoryStore = defineStore(store_name, {
             }
         },
 
-        async shapeTransactions(label: Label = 'current', transactions: EvmTransaction[]) {
+        async shapeTransactions(label: Label = CURRENT_CONTEXT, transactions: EvmTransaction[]) {
             this.trace('shapeTransactions', label);
             const feedbackStore = useFeedbackStore();
             const userStore = useUserStore();
@@ -293,9 +293,9 @@ export const useHistoryStore = defineStore(store_name, {
         clearEvmTransactions() {
             this.trace('clearEvmTransactions');
             this.setEVMTransactionsFilter({ address: '' });
-            this.setEVMTransactions('current', []);
-            this.setShapedTransactionRows('current', []);
-            this.setEvmTransactionsRowCount('current', 0);
+            this.setEVMTransactions(CURRENT_CONTEXT, []);
+            this.setShapedTransactionRows(CURRENT_CONTEXT, []);
+            this.setEvmTransactionsRowCount(CURRENT_CONTEXT, 0);
         },
     },
 });
diff --git a/src/antelope/stores/nfts.ts b/src/antelope/stores/nfts.ts
index 73026e15d..e553e6b07 100644
--- a/src/antelope/stores/nfts.ts
+++ b/src/antelope/stores/nfts.ts
@@ -7,7 +7,7 @@ import { defineStore } from 'pinia';
 
 import { Label, Network, Address, IndexerTransactionsFilter, NFTClass, ERC721_TYPE } from 'src/antelope/types';
 
-import { useFeedbackStore, getAntelope, useChainStore, useEVMStore } from 'src/antelope';
+import { useFeedbackStore, getAntelope, useChainStore, useEVMStore, CURRENT_CONTEXT } from 'src/antelope';
 import { createTraceFunction, isTracingAll } from 'src/antelope/stores/feedback';
 import { toRaw } from 'vue';
 import { AccountModel } from 'src/antelope/stores/account';
@@ -50,8 +50,8 @@ const store_name = 'nfts';
 export const useNftsStore = defineStore(store_name, {
     state: (): NftsState => (nftsInitialState),
     getters: {
-        loggedInventory: state => state.__inventory['current']?.list,
-        loggedInventoryLoading: state => state.__inventory['current']?.loading,
+        loggedInventory: state => state.__inventory[CURRENT_CONTEXT]?.list,
+        loggedInventoryLoading: state => state.__inventory[CURRENT_CONTEXT]?.loading,
         getInventory: state => (label: string) => state.__inventory[label],
         getUserFilter: state => state.__user_filter,
         getCollectionList: state => (label: string): NftCollectionListItem[] => {
diff --git a/src/antelope/stores/tokens.ts b/src/antelope/stores/tokens.ts
index caa2f4db6..2a0443a1b 100644
--- a/src/antelope/stores/tokens.ts
+++ b/src/antelope/stores/tokens.ts
@@ -6,7 +6,7 @@ import { defineStore } from 'pinia';
 import {
     Label, TokenClass,
 } from 'src/antelope/types';
-import { getAntelope, useFeedbackStore, useChainStore } from 'src/antelope';
+import { getAntelope, useFeedbackStore, useChainStore, CURRENT_CONTEXT } from 'src/antelope';
 import { toRaw } from 'vue';
 import { errorToString } from 'src/antelope/config';
 import { filter } from 'rxjs';
@@ -22,8 +22,8 @@ const store_name = 'tokens';
 export const useTokensStore = defineStore(store_name, {
     state: (): TokensState => (tokensInitialState),
     getters: {
-        loggedTokens: state => state.__tokens['current'],
-        currentTokens: state => state.__tokens['current'],
+        loggedTokens: state => state.__tokens[CURRENT_CONTEXT],
+        currentTokens: state => state.__tokens[CURRENT_CONTEXT],
         getTokens: state => (label: string) => state.__tokens[label],
     },
     actions: {
@@ -31,7 +31,7 @@ export const useTokensStore = defineStore(store_name, {
         init: () => {
             useFeedbackStore().setDebug(store_name, isTracingAll());
             getAntelope().events.onNetworkChanged.pipe(
-                filter(e => e.label === 'current'),
+                filter(e => e.label === CURRENT_CONTEXT),
             ).subscribe({
                 next: ({ label, chain }) => {
                     useTokensStore().updateTokensForNetwork(label, toRaw(chain));
diff --git a/src/antelope/types/Basic.ts b/src/antelope/types/Basic.ts
index d1d5b481d..726b78431 100644
--- a/src/antelope/types/Basic.ts
+++ b/src/antelope/types/Basic.ts
@@ -1,3 +1,3 @@
-export type Label = 'current' | string;
+export type Label = string;
 export type Network = 'telos' | 'telos-evm' | string;
 export type Address = string;
diff --git a/src/antelope/wallets/authenticators/EVMAuthenticator.ts b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
index 6ea6860ed..9dca55135 100644
--- a/src/antelope/wallets/authenticators/EVMAuthenticator.ts
+++ b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
@@ -2,7 +2,7 @@
 
 import { SendTransactionResult, WriteContractResult } from '@wagmi/core';
 import { BigNumber, ethers } from 'ethers';
-import { getAntelope } from 'src/antelope';
+import { CURRENT_CONTEXT, getAntelope } from 'src/antelope';
 import { useChainStore } from 'src/antelope/stores/chain';
 import { useEVMStore } from 'src/antelope/stores/evm';
 import { createTraceFunction, isTracingAll, useFeedbackStore } from 'src/antelope/stores/feedback';
@@ -44,7 +44,7 @@ export abstract class EVMAuthenticator {
         this.trace('login', network);
         const chain = useChainStore();
         try {
-            chain.setChain('current', network);
+            chain.setChain(CURRENT_CONTEXT, network);
 
             const checkProvider = await this.ensureCorrectChain() as ethers.providers.Web3Provider;
 
diff --git a/src/boot/antelope.ts b/src/boot/antelope.ts
index d1d438432..465045a46 100644
--- a/src/boot/antelope.ts
+++ b/src/boot/antelope.ts
@@ -2,7 +2,7 @@ import { EthereumClient } from '@web3modal/ethereum';
 import { Web3ModalConfig } from '@web3modal/html';
 import { OreIdOptions } from 'oreid-js';
 import { boot } from 'quasar/wrappers';
-import { installAntelope } from 'src/antelope';
+import { CURRENT_CONTEXT, installAntelope } from 'src/antelope';
 import { AntelopeError } from 'src/antelope/types';
 import {
     MetamaskAuth,
@@ -97,7 +97,7 @@ export default boot(({ app }) => {
     // Otherwise we just let the store decide which network to connect to
     const network = new URLSearchParams(window.location.search).get('network');
     if (network) {
-        ant.stores.chain.setChain('current', network);
+        ant.stores.chain.setChain(CURRENT_CONTEXT, network);
     }
 
 });
diff --git a/src/pages/demo/SendPageErrors.vue b/src/pages/demo/SendPageErrors.vue
index c7bea9c4a..2a41169f3 100644
--- a/src/pages/demo/SendPageErrors.vue
+++ b/src/pages/demo/SendPageErrors.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { getAntelope, useAccountStore, useChainStore, useUserStore } from 'src/antelope';
+import { CURRENT_CONTEXT, getAntelope, useAccountStore, useChainStore, useUserStore } from 'src/antelope';
 import { TransactionResponse, TokenClass, TokenBalance, NativeCurrencyAddress, AntelopeError } from 'src/antelope/types';
 import { formatWei, prettyPrintBalance, prettyPrintFiatBalance } from 'src/antelope/stores/utils';
 import { BigNumber, ethers } from 'ethers';
@@ -93,7 +93,7 @@ export default defineComponent({
             return this.$q.screen.lt.sm;
         },
         balances(): TokenBalance[] {
-            return ant.stores.balances.getBalances('current');
+            return ant.stores.balances.getBalances(CURRENT_CONTEXT);
         },
         showContractLink(): boolean {
             return !!this.token?.address;
diff --git a/src/pages/evm/nfts/NftDetailsPage.vue b/src/pages/evm/nfts/NftDetailsPage.vue
index bd9076d02..455265f72 100644
--- a/src/pages/evm/nfts/NftDetailsPage.vue
+++ b/src/pages/evm/nfts/NftDetailsPage.vue
@@ -7,7 +7,7 @@ import { computed, onBeforeMount, ref } from 'vue';
 import NftViewer from 'pages/evm/nfts/NftViewer.vue';
 import NftDetailsCard from 'pages/evm/nfts/NftDetailsCard.vue';
 import ExternalLink from 'components/ExternalLink.vue';
-import { useChainStore } from 'src/antelope';
+import { CURRENT_CONTEXT, useChainStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import NumberedList from 'components/NumberedList.vue';
 import { isValidAddressFormat } from 'src/antelope/stores/utils';
@@ -28,7 +28,7 @@ const nftId = route.query.id as string;
 
 onBeforeMount(() => {
     if (contractAddress && nftId) {
-        nftStore.fetchNftDetails('current', contractAddress, nftId).then((nftResponse) => {
+        nftStore.fetchNftDetails(CURRENT_CONTEXT, contractAddress, nftId).then((nftResponse) => {
             nft.value = nftResponse ?? null;
             loading.value = false;
         });
diff --git a/src/pages/evm/nfts/NftInventoryPage.vue b/src/pages/evm/nfts/NftInventoryPage.vue
index 713e9f894..59bb9b4da 100644
--- a/src/pages/evm/nfts/NftInventoryPage.vue
+++ b/src/pages/evm/nfts/NftInventoryPage.vue
@@ -9,7 +9,7 @@ import NftViewer from 'pages/evm/nfts/NftViewer.vue';
 import ExternalLink from 'components/ExternalLink.vue';
 
 import { useNftsStore } from 'src/antelope/stores/nfts';
-import { useChainStore } from 'src/antelope';
+import { CURRENT_CONTEXT, useChainStore } from 'src/antelope';
 import { NFTClass, ShapedNFT } from 'src/antelope/types';
 import { useAccountStore } from 'src/antelope';
 
@@ -84,7 +84,7 @@ const { __user_filter: userInventoryFilter } = storeToRefs(nftStore);
 // computed
 const loading = computed(() => nftStore.loggedInventoryLoading || !nftsLoaded.value || Boolean(!collectionList.value.length && nfts.value.length));
 const nftsAndCollectionListLoaded = computed(() => nftsLoaded.value && collectionList.value.length);
-const nfts = computed(() => nftsLoaded.value ? (nftStore.getUserFilteredInventory('current') as NFTClass[]) : []);
+const nfts = computed(() => nftsLoaded.value ? (nftStore.getUserFilteredInventory(CURRENT_CONTEXT) as NFTClass[]) : []);
 const nftsToShow = computed(() => {
     const { page, rowsPerPage } = pagination.value;
     const start = page === 1 ? 0 : (page - 1) * rowsPerPage;
@@ -92,7 +92,7 @@ const nftsToShow = computed(() => {
 
     return nfts.value.slice(start, end);
 });
-const collectionList = computed(() => nftStore.getCollectionList('current') || []);
+const collectionList = computed(() => nftStore.getCollectionList(CURRENT_CONTEXT) || []);
 const collectionSelectOptions = computed(() => collectionList.value.map(item => item.name));
 const tableRows = computed(() => {
     if (showNftsAsTiles.value) {
@@ -164,7 +164,7 @@ watch(nftsAndCollectionListLoaded, (loaded) => {
 watch(accountStore, (store) => {
     // fetch initial data
     if (store.loggedAccount) {
-        nftStore.updateNFTsForAccount('current', toRaw(store.loggedAccount)).finally(() => {
+        nftStore.updateNFTsForAccount(CURRENT_CONTEXT, toRaw(store.loggedAccount)).finally(() => {
             nftsLoaded.value = true;
         });
     }
@@ -295,7 +295,7 @@ let timer: string | number | NodeJS.Timer | undefined;
 onMounted(async () => {
     timer = setInterval(async () => {
         if (accountStore.loggedAccount) {
-            await nftStore.updateNFTsForAccount('current', accountStore.loggedAccount);
+            await nftStore.updateNFTsForAccount(CURRENT_CONTEXT, accountStore.loggedAccount);
         }
     }, 13000);
 });
diff --git a/src/pages/evm/wallet/SendPage.vue b/src/pages/evm/wallet/SendPage.vue
index cdb8e823e..54e345777 100644
--- a/src/pages/evm/wallet/SendPage.vue
+++ b/src/pages/evm/wallet/SendPage.vue
@@ -2,7 +2,7 @@
 import { defineComponent } from 'vue';
 import AppPage from 'components/evm/AppPage.vue';
 import UserInfo from 'components/evm/UserInfo.vue';
-import { getAntelope, useAccountStore, useChainStore, useUserStore } from 'src/antelope';
+import { CURRENT_CONTEXT, getAntelope, useAccountStore, useChainStore, useUserStore } from 'src/antelope';
 import { TransactionResponse, TokenClass, TokenBalance, NativeCurrencyAddress, AntelopeError } from 'src/antelope/types';
 import { formatWei, prettyPrintBalance, prettyPrintFiatBalance } from 'src/antelope/stores/utils';
 import { BigNumber, ethers } from 'ethers';
@@ -114,7 +114,7 @@ export default defineComponent({
             return this.$q.screen.lt.sm;
         },
         balances(): TokenBalance[] {
-            return ant.stores.balances.getBalances('current');
+            return ant.stores.balances.getBalances(CURRENT_CONTEXT);
         },
         showContractLink(): boolean {
             return this.token?.address !== NativeCurrencyAddress;
@@ -167,7 +167,7 @@ export default defineComponent({
             return ant.stores.feedback.isLoading('transferEVMTokens') || (this.isFormValid && !this.authIsReadyForTransfer);
         },
         authIsReadyForTransfer(): boolean {
-            return accountStore.getEVMAuthenticator('current')?.readyForTransfer() ?? false;
+            return accountStore.getEVMAuthenticator(CURRENT_CONTEXT)?.readyForTransfer() ?? false;
         },
         currencyInputIsLoading() {
             return !(this.token?.decimals && this.token?.symbol);
@@ -222,7 +222,7 @@ export default defineComponent({
         async startTransfer() {
 
             // before sending the transaction, we check if the user is connected to the correct network
-            const label = 'current';
+            const label = CURRENT_CONTEXT;
             if (!await useAccountStore().isConnectedToCorrectNetwork(label)) {
                 const authenticator = useAccountStore().loggedAccount.authenticator as EVMAuthenticator;
                 const networkName = useChainStore().loggedChain.settings.getDisplay();
diff --git a/src/pages/evm/wallet/WalletPage.vue b/src/pages/evm/wallet/WalletPage.vue
index c1caa13af..72ad6e24f 100644
--- a/src/pages/evm/wallet/WalletPage.vue
+++ b/src/pages/evm/wallet/WalletPage.vue
@@ -5,7 +5,7 @@ import { TokenBalance } from 'src/antelope/types';
 import AppPage from 'components/evm/AppPage.vue';
 import WalletPageHeader from 'pages/evm/wallet/WalletPageHeader.vue';
 import WalletBalanceRow from 'pages/evm/wallet/WalletBalanceRow.vue';
-import { useAccountStore, useBalancesStore, useFeedbackStore, useHistoryStore } from 'src/antelope';
+import { CURRENT_CONTEXT, useAccountStore, useBalancesStore, useFeedbackStore, useHistoryStore } from 'src/antelope';
 import WalletTransactionsTab from 'pages/evm/wallet/WalletTransactionsTab.vue';
 
 const route = useRoute();
@@ -44,7 +44,7 @@ watch(accountStore.currentEvmAccount, (newAccount) => {
             limit: 5,
             includeAbi: true,
         });
-        historyStore.fetchEVMTransactionsForAccount('current');
+        historyStore.fetchEVMTransactionsForAccount(CURRENT_CONTEXT);
     }
 }, { immediate: true });
 
diff --git a/src/pages/evm/wallet/WalletTransactionsTab.vue b/src/pages/evm/wallet/WalletTransactionsTab.vue
index b8b61c7c1..e1ff2c521 100644
--- a/src/pages/evm/wallet/WalletTransactionsTab.vue
+++ b/src/pages/evm/wallet/WalletTransactionsTab.vue
@@ -3,7 +3,7 @@ import { defineComponent } from 'vue';
 import WalletTransactionRow from 'pages/evm/wallet/WalletTransactionRow.vue';
 
 import TableControls from 'components/evm/TableControls.vue';
-import { getAntelope, useAccountStore, useFeedbackStore, useHistoryStore } from 'src/antelope';
+import { CURRENT_CONTEXT, getAntelope, useAccountStore, useFeedbackStore, useHistoryStore } from 'src/antelope';
 import { AntelopeError } from 'src/antelope/types';
 
 
@@ -42,7 +42,7 @@ export default defineComponent({
             return accountStore.loggedEvmAccount?.address ?? '';
         },
         shapedTransactions() {
-            return historyStore.getShapedTransactionRows('current') ?? [];
+            return historyStore.getShapedTransactionRows(CURRENT_CONTEXT) ?? [];
         },
         totalRowsText() {
             if (this.loading) {
@@ -127,8 +127,8 @@ export default defineComponent({
                     includeAbi: true,
                 });
                 try {
-                    await historyStore.fetchEVMTransactionsForAccount('current');
-                    this.pagination.rowsNumber = historyStore.getEvmTransactionsRowCount('current');
+                    await historyStore.fetchEVMTransactionsForAccount(CURRENT_CONTEXT);
+                    this.pagination.rowsNumber = historyStore.getEvmTransactionsRowCount(CURRENT_CONTEXT);
                 } catch (e) {
                     if (e instanceof AntelopeError) {
                         getAntelope().config.notifyFailureMessage(e.message, e.payload);
diff --git a/src/pages/evm/wrap/UnwrapTab.vue b/src/pages/evm/wrap/UnwrapTab.vue
index 8ddd2a54f..1f04ab8dd 100644
--- a/src/pages/evm/wrap/UnwrapTab.vue
+++ b/src/pages/evm/wrap/UnwrapTab.vue
@@ -2,7 +2,7 @@
 import { computed, onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import { getAntelope, useAccountStore, useBalancesStore, useChainStore, useUserStore } from 'src/antelope';
+import { CURRENT_CONTEXT, getAntelope, useAccountStore, useBalancesStore, useChainStore, useUserStore } from 'src/antelope';
 
 import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
 import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
@@ -75,7 +75,7 @@ onBeforeMount(() => {
 });
 
 async function handleUnwrapClick() {
-    const label = 'current';
+    const label = CURRENT_CONTEXT;
     if (!await accountStore.isConnectedToCorrectNetwork(label)) {
         const networkName = useChainStore().loggedChain.settings.getDisplay();
         const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
diff --git a/src/pages/evm/wrap/WrapTab.vue b/src/pages/evm/wrap/WrapTab.vue
index e614bb459..bd888f44e 100644
--- a/src/pages/evm/wrap/WrapTab.vue
+++ b/src/pages/evm/wrap/WrapTab.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { ethers } from 'ethers';
 
 import {
+    CURRENT_CONTEXT,
     getAntelope,
     useAccountStore,
     useBalancesStore,
@@ -91,7 +92,7 @@ onBeforeMount(() => {
 });
 
 async function handleCtaClick() {
-    const label = 'current';
+    const label = CURRENT_CONTEXT;
     if (!await accountStore.isConnectedToCorrectNetwork(label)) {
         const networkName = useChainStore().loggedChain.settings.getDisplay();
         const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
diff --git a/src/pages/home/EVMLoginButtons.vue b/src/pages/home/EVMLoginButtons.vue
index a803fcb38..70b67125a 100644
--- a/src/pages/home/EVMLoginButtons.vue
+++ b/src/pages/home/EVMLoginButtons.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { getAntelope, useAccountStore, useChainStore, useEVMStore, useFeedbackStore, usePlatformStore } from 'src/antelope';
+import { CURRENT_CONTEXT, getAntelope, useAccountStore, useChainStore, useEVMStore, useFeedbackStore, usePlatformStore } from 'src/antelope';
 import { ComponentInternalInstance, computed, defineComponent, getCurrentInstance, ref, watch } from 'vue';
 import { QSpinnerFacebook } from 'quasar';
 import { OreIdAuth } from 'src/antelope/wallets';
@@ -54,16 +54,16 @@ export default defineComponent({
                 (auth as OreIdAuth).setProvider(provider);
                 selectedOAuthProvider.value = provider;
             }
-            setAuthenticator(name, 'current');
+            setAuthenticator(name, CURRENT_CONTEXT);
         };
         const setMetamaskAuthenticator = async () => {
-            setAuthenticator('Metamask', 'current');
+            setAuthenticator('Metamask', CURRENT_CONTEXT);
         };
         const setSafepalAuthenticator = async () => {
-            setAuthenticator('SafePal', 'current');
+            setAuthenticator('SafePal', CURRENT_CONTEXT);
         };
         const setWalletConnectAuthenticator = async () => {
-            setAuthenticator('WalletConnect', 'current');
+            setAuthenticator('WalletConnect', CURRENT_CONTEXT);
         };
 
         const setAuthenticator = async(name: string, label: string) => {
diff --git a/src/pages/home/NativeLoginButton.vue b/src/pages/home/NativeLoginButton.vue
index 04f3f857d..521e78800 100644
--- a/src/pages/home/NativeLoginButton.vue
+++ b/src/pages/home/NativeLoginButton.vue
@@ -1,6 +1,6 @@
 
 <script>
-import { useChainStore } from 'src/antelope';
+import { CURRENT_CONTEXT, useChainStore } from 'src/antelope';
 import { defineComponent } from 'vue';
 import { mapGetters, mapActions, mapMutations } from 'vuex';
 
@@ -51,7 +51,7 @@ export default defineComponent({
         setDefaultNativeChain() {
             const network = process.env.CHAIN_NAME || 'telos';
             const chainStore = useChainStore();
-            chainStore.setChain('current', network);
+            chainStore.setChain(CURRENT_CONTEXT, network);
         },
         // end of antelope methods
         ...mapActions('account', [
diff --git a/test/jest/__tests__/pages/home/EVMLoginButtons.spec.ts b/test/jest/__tests__/pages/home/EVMLoginButtons.spec.ts
index 18aa84b36..99b488697 100644
--- a/test/jest/__tests__/pages/home/EVMLoginButtons.spec.ts
+++ b/test/jest/__tests__/pages/home/EVMLoginButtons.spec.ts
@@ -5,6 +5,7 @@ import * as storeMock from 'test/jest/utils/antelope';
 const WARNING_MESSAGE = 'warning-message';
 
 import EVMLoginButtons from 'src/pages/home/EVMLoginButtons.vue';
+import { CURRENT_CONTEXT } from 'src/antelope';
 
 const mountComponent = () => shallowMount(EVMLoginButtons, {
     mocks: {
@@ -33,7 +34,7 @@ describe('EVMLoginButtons.vue', () => {
             it('should call accountStore loginEVM method 2', () => {
                 const methodSpy = jest.spyOn(storeMock.useAccountStore(), 'loginEVM');
                 wrapper.vm.setMetamaskAuthenticator();
-                const label = 'current';
+                const label = CURRENT_CONTEXT;
                 const network = storeMock.MockData.Network;
                 wrapper.vm.$nextTick(() => {
                     expect(methodSpy).toHaveBeenCalledWith(expect.objectContaining({
diff --git a/test/jest/utils/antelope/index.ts b/test/jest/utils/antelope/index.ts
index 9d3abc507..a1d6dfe35 100644
--- a/test/jest/utils/antelope/index.ts
+++ b/test/jest/utils/antelope/index.ts
@@ -21,12 +21,13 @@ export const getAntelope = jest.fn().mockImplementation(() => ({
         getAutenticator: () => ({
             newInstance: (label: string) => ({
                 label,
-                isConnectedTo: () => Promise.resolve(label === 'current'),
+                isConnectedTo: () => Promise.resolve(true),
             }),
         }),
     },
 }));
 
+const CURRENT_CONTEXT = 'current';
 
 jest.mock('src/antelope', () => ({
     useChainStore,
@@ -35,6 +36,7 @@ jest.mock('src/antelope', () => ({
     useFeedbackStore,
     usePlatformStore,
     getAntelope,
+    CURRENT_CONTEXT,
 }));
 
 

From 920fc645e61e6c195a6ba8123f0724b321a612e0 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 16:00:26 -0300
Subject: [PATCH 088/268] WIP

---
 src/components/evm/AppNav.vue               |   1 -
 src/i18n/en-us/index.js                     |   7 +
 src/pages/evm/staking/StakingPage.vue       |  22 ++-
 src/pages/evm/staking/StakingPageHeader.vue | 149 ++++++++++++++++++++
 src/router/routes.js                        |  10 +-
 5 files changed, 169 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/evm/staking/StakingPageHeader.vue

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 479ff74ce..a8b47a003 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -261,7 +261,6 @@ export default defineComponent({
             </li>
 
             <li
-                v-if="false"
                 class="c-app-nav__menu-item"
                 role="menuitem"
                 :tabindex="menuItemTabIndex"
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 338de764f..057f973d3 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -189,6 +189,13 @@ export default {
         wrap_input_label: 'Wrapping Amount',
         unwrap_input_label: 'Unwrapping Amount',
     },
+    evm_stake: {
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        staked_card_label: 'Staked {symbol}',
+        staked_card_tooltip: 'Staked\n\n' +
+        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_tooltip: 'Unstaking',
+    },
     notification:{
         success_title_trx: 'Success',
         success_title_copied: 'Copied',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index c7e321c75..e5ac5b327 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -1,24 +1,14 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script setup lang="ts">
 import AppPage from 'components/evm/AppPage.vue';
+import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
 
-export default defineComponent({
-    name: 'StakingPage',
-    components: {
-        AppPage,
-    },
-    data: () => ({
-        tabs: ['stake', 'unstake', 'withdraw'],
-    }),
-
-});
+const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
 
 <template>
 <AppPage :tabs="tabs">
     <template v-slot:header>
-        <p>stake page header stuff</p>
+        <StakingPageHeader />
     </template>
 
     <template v-slot:stake>
@@ -38,3 +28,7 @@ export default defineComponent({
 <style lang="scss">
 
 </style>
+
+
+
+
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
new file mode 100644
index 000000000..3beaa0d97
--- /dev/null
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BigNumber, ethers } from 'ethers';
+
+import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
+import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { NativeCurrencyAddress } from 'src/antelope/types';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+
+import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
+
+
+const { t: $t } = useI18n();
+const userStore = useUserStore();
+const balancesStore = useBalancesStore();
+const chainStore = useChainStore();
+const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
+// data
+const systemTokenPrice = ref(0); // always equal to wrapped token price
+const loading = ref(true);
+
+
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenName = computed(() => chainSettings.getSystemToken().name);
+const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
+const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
+
+const totalFiatValueText = ref('--');
+
+/*
+const totalFiatValueText = computed(() => {
+    if (loading.value) {
+        return '--';
+    }
+
+    const totalBalance = +totalSystemAndWrappedBalance.value;
+    const totalFiatValue = totalBalance * systemTokenPrice.value;
+
+    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
+});
+
+
+const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
+const allBalances = computed(() => balancesStore.loggedBalances);
+const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
+const wrappedTokenBalanceBn = computed(() =>
+    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
+);
+const totalSystemAndWrappedBalance = computed(() => {
+    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
+        return '0';
+    }
+    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
+
+    return formatWei(addedBn, WEI_PRECISION);
+});
+const totalBalanceUnitsText = computed(() => {
+    const systemSymbol = chainSettings.getSystemToken().symbol;
+    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+
+    return `${systemSymbol} + ${wrappedSymbol}`;
+});
+const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const wrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
+*/
+
+const stakedFiatValueText = ref('--');
+const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
+const unstakingFiatValueText = ref('--');
+const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
+
+const cardData = computed(() => [{
+    label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    primaryText: stakedFiatValueText.value,
+    secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}]);
+
+
+// methods
+onBeforeMount(() => {
+    chainSettings.getUsdPrice().then((price) => {
+        systemTokenPrice.value = price;
+    }).finally(() => {
+        loading.value = false;
+    });
+});
+
+function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
+    return prettyPrintCurrency(
+        amount ?? BigNumber.from(0),
+        4,
+        fiatLocale.value,
+        false,
+        symbol,
+        false,
+        WEI_PRECISION,
+    );
+}
+</script>
+
+<template>
+<div class="c-staking-header">
+    <div class="text-center q-mb-xl">
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemTokenName }) }}</h5>
+        <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
+    </div>
+
+    <ScrollableInfoCards :cards="cardData" />
+</div>
+</template>
+
+<style lang="scss">
+.c-staking-header {
+    width: 100%;
+}
+</style>
diff --git a/src/router/routes.js b/src/router/routes.js
index 4d99cdc2c..2c700f75b 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -72,11 +72,11 @@ const routes = [
                 },
                 component: () => import('pages/evm/nfts/NftDetailsPage.vue'),
             },
-            // {
-            //     path: 'staking',
-            //     name: 'evm-staking',
-            //     component: () => import('pages/evm/staking/StakingPage.vue'),
-            // },
+            {
+                path: 'staking',
+                name: 'evm-staking',
+                component: () => import('pages/evm/staking/StakingPage.vue'),
+            },
             {
                 path: 'wrap',
                 name: 'evm-wrap',

From c19d8aef99641ba38dd04019a27aba5944ae1401 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 089/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue               |  10 ++
 src/components/evm/ScrollableInfoCards.vue  |  14 ++-
 src/i18n/en-us/index.js                     |  31 +++++-
 src/pages/evm/staking/StakingPageHeader.vue | 111 +++++++++-----------
 4 files changed, 98 insertions(+), 68 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index a8b47a003..2be56ab14 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,6 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
+                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
             </li>
 
             <li
@@ -481,6 +482,15 @@ export default defineComponent({
         }
     }
 
+    &__apy-box {
+        @include text--small;
+        background-color: rgba(255, 255, 255, 0.1);
+        color: var(--bg-color);
+        padding: 4px 8px;
+        border-radius: 4px;
+        display: inline-block;
+    }
+
     &__icon {
         // svg color overrides
         &--current-route:not(#{$this}__icon--acorn) path {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 591334a9a..1b10f0552 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -8,13 +8,21 @@ const props = defineProps<{
         primaryText?: string;
         secondaryText?: string;
         lowContrastSecondaryText?: boolean;
+        useSmallBox?: boolean;
     }[];
 }>();
 </script>
 
 <template>
 <div class="c-scrollable-info-cards">
-    <div v-for="(card, index) in cards" :key="`card-${index}`" class="c-scrollable-info-cards__card">
+    <div
+        v-for="(card, index) in cards"
+        :key="`card-${index}`"
+        :class="{
+            'c-scrollable-info-cards__card': true,
+            'c-scrollable-info-cards__card--small': !!card.useSmallBox,
+        }"
+    >
         <div class="c-scrollable-info-cards__card-header">
             <h5 class="u-text--low-contrast">
                 {{ card.label }}
@@ -66,9 +74,11 @@ const props = defineProps<{
         border: 2px solid var(--header-item-outline-color);
         width: 220px;
         flex-shrink: 0;
-
         @include sm-and-up {
             width: 300px;
+            &--small {
+                width: 220px;
+            }
         }
     }
 
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 057f973d3..3de2c9501 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -192,9 +192,34 @@ export default {
     evm_stake: {
         total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
         staked_card_label: 'Staked {symbol}',
-        staked_card_tooltip: 'Staked\n\n' +
-        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
-        unstaking_card_tooltip: 'Unstaking',
+        staked_card_tooltip: 'Staked tokens:\n\n' +
+        'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
+        'This includes your {stakedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_label: 'Unstaking',
+        unstaking_card_tooltip: 'Unstaking tokens:\n\n' +
+        'This reflects the total value of locked {systemSymbol} in the process of unstaking.\n' +
+        'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
+        'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
+        'During this time you cannot interact with this {systemSymbol}.',
+        withdrawable_card_label: 'Withdraw-able',
+        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
+        'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
+        'you can withdraw your {systemSymbol} from escrow.',
+        apy_card_label: 'APY',
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
+        'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
+        'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
+        'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
+        unstaking_period_card_label: 'Unstaking Period',
+        unstaking_period_card_tooltip: 'Unstaking Period:\n\n' +
+        'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
+        'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
+        tvl_card_label: 'TVL',
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 3beaa0d97..52b4b682d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -29,83 +29,63 @@ const systemTokenName = computed(() => chainSettings.getSystemToken().name);
 const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
 const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
 
-const totalFiatValueText = ref('--');
+const totalFiatValueText = ref('$ 4,324.35');
 
-/*
-const totalFiatValueText = computed(() => {
-    if (loading.value) {
-        return '--';
-    }
-
-    const totalBalance = +totalSystemAndWrappedBalance.value;
-    const totalFiatValue = totalBalance * systemTokenPrice.value;
-
-    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
-});
+const stakedFiatValueText = ref('$ 4,000.23');
+const stakedTokenBalanceBn = ref(ethers.utils.parseUnits('34021.230', WEI_PRECISION));
+const unstakingFiatValueText = ref('$ 200.72');
+const unstakingBalanceBn = ref(ethers.utils.parseUnits('1242.0312', WEI_PRECISION));
+const withdrawableFiatValueText = ref('$ 123.02');
+const withdrawableBalanceBn = ref(ethers.utils.parseUnits('245.0225', WEI_PRECISION));
 
+const apyPrittyPrint = ref('8.23%');
+const unlockPeriod = ref('10 days');
 
-const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
-const allBalances = computed(() => balancesStore.loggedBalances);
-const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
-const wrappedTokenBalanceBn = computed(() =>
-    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
-);
-const totalSystemAndWrappedBalance = computed(() => {
-    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
-        return '0';
-    }
-    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
-
-    return formatWei(addedBn, WEI_PRECISION);
-});
-const totalBalanceUnitsText = computed(() => {
-    const systemSymbol = chainSettings.getSystemToken().symbol;
-    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
+const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
+const evmNetworkName = ref('Telos EVM');
 
-    return `${systemSymbol} + ${wrappedSymbol}`;
-});
-const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const wrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
-*/
-
-const stakedFiatValueText = ref('--');
-const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
-const unstakingFiatValueText = ref('--');
-const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
-
-const cardData = computed(() => [{
+const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
     tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
     primaryText: stakedFiatValueText.value,
     secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    label: $t('evm_stake.unstaking_card_label'),
+    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
     primaryText: unstakingFiatValueText.value,
     secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
-    primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    label: $t('evm_stake.withdrawable_card_label'),
+    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    primaryText: withdrawableFiatValueText.value,
+    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
+}]);
+
+const secondLineData = computed(() => [{
+    label: $t('evm_stake.apy_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: apyPrittyPrint.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.unstaking_period_card_label'),
+    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: unlockPeriod.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.tvl_card_label'),
+    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: prettyPrintToken(tvlAmountBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
 }]);
 
 
@@ -138,12 +118,17 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 
-    <ScrollableInfoCards :cards="cardData" />
+    <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
+    <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>
 </template>
 
 <style lang="scss">
 .c-staking-header {
     width: 100%;
+
+    &__cards-second-line {
+        margin-top: 24px;
+    }
 }
 </style>

From 78eb8dfc9af03b575d79b91319b1d34422fc6cae Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 090/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3de2c9501..d20cab566 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 052db59481bbdef13a93fea4321973a0f726dca1 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:10:04 -0400
Subject: [PATCH 091/268] use i18n for apy label

---
 src/components/evm/AppNav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 2be56ab14..9fb48b9c9 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,7 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
+                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
             </li>
 
             <li

From 0eb13e9768a40212a00f04bad900775d65669a1d Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 092/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index d20cab566..3de2c9501 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 4b9a7466532f8fb858ca31093c1c2e46ee3ac3aa Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 093/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3de2c9501..d20cab566 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From c9cfbcb939b246a49063de177bb240a70ccc9506 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 094/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index d20cab566..3de2c9501 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From b833d3e5081dc3e524a94f59bc7d036832f0e71f Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 095/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3de2c9501..d20cab566 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From aa2cd142ee79ac5c09ab1a15102882559fd125c4 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 096/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue | 4 ++++
 src/i18n/en-us/index.js       | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 9fb48b9c9..fe9b79a2b 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,7 +279,11 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
+<<<<<<< HEAD
                 <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
+=======
+                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
+>>>>>>> a8908111 (adding page header component for Staking Section)
             </li>
 
             <li
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index d20cab566..3de2c9501 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From d8697540cfded4a38beabbd591f637cb4bd0548a Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:10:04 -0400
Subject: [PATCH 097/268] use i18n for apy label

---
 src/components/evm/AppNav.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index fe9b79a2b..9fb48b9c9 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,11 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-<<<<<<< HEAD
                 <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
-=======
-                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
->>>>>>> a8908111 (adding page header component for Staking Section)
             </li>
 
             <li

From 375a5adeb9f26ab5d180807daf7dac946f4d8280 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 22 Aug 2023 16:38:41 -0300
Subject: [PATCH 098/268] saving WIP

---
 src/antelope/chains/EVMChainSettings.ts       | 47 ++++++++--
 .../chains/evm/telos-evm-testnet/index.ts     |  5 ++
 src/antelope/chains/evm/telos-evm/index.ts    |  5 ++
 src/antelope/stores/balances.ts               |  3 +-
 src/antelope/stores/chain.ts                  | 71 ++++++++++++++--
 src/antelope/stores/evm.ts                    | 20 +++--
 src/antelope/types/ChainSettings.ts           |  3 +
 src/antelope/wallets/index.ts                 |  2 +-
 src/components/evm/AppNav.vue                 | 27 +++++-
 src/components/evm/ScrollableInfoCards.vue    | 28 +++++-
 src/i18n/en-us/index.js                       |  1 +
 src/pages/evm/staking/StakingPageHeader.vue   | 85 +++++++++++++------
 12 files changed, 244 insertions(+), 53 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 83e9c9e9b..2675466b3 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -42,6 +42,9 @@ export default abstract class EVMChainSettings implements ChainSettings {
     // External query API support
     protected hyperion: AxiosInstance = axios.create({ baseURL: this.getHyperionEndpoint() });
 
+    // External query API support
+    protected api: AxiosInstance = axios.create({ baseURL: this.getApiEndpoint() });
+
     // External trusted metadata bucket for EVM contracts
     protected contractsBucket: AxiosInstance = axios.create({ baseURL: this.getTrustedContractsBucket() });
 
@@ -61,7 +64,10 @@ export default abstract class EVMChainSettings implements ChainSettings {
     tokenListPromise: Promise<TokenClass[]> | null = null;
 
     // EvmContracts cache mapped by address
-    protected contracts: Record<string, EvmContract | false> = {};
+    protected contracts: Record<string, {
+        promise: Promise<EvmContract | false>;
+        resolve?: (value: EvmContract | false) => void;
+    }> = {};
 
     constructor(network: string) {
         this.network = network;
@@ -214,6 +220,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract getDisplay(): string;
     abstract getHyperionEndpoint(): string;
     abstract getRPCEndpoint(): RpcEndpoint;
+    abstract getApiEndpoint(): string;
     abstract getPriceData(): Promise<PriceChartData>;
     abstract getUsdPrice(): Promise<number>;
     abstract getBuyMoreOfTokenLink(): string;
@@ -226,6 +233,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract hasIndexerSupport(): boolean;
     abstract trackAnalyticsEvent(params: Record<string, unknown>): void;
 
+    async getApy(): Promise<string> {
+        const response = await this.api.get('apy/evm');
+        return response.data as string;
+    }
+
     async getBalances(account: string): Promise<TokenBalance[]> {
         if (!this.hasIndexerSupport()) {
             console.error('Indexer API not supported for this chain:', this.getNetwork());
@@ -351,22 +363,47 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return `${token.symbol}-${token.address}-${this.getNetwork()}`;
     }
 
-    getContract(address: string): EvmContract | false | null {
+    async getContract(address: string): Promise<EvmContract | false | null> {
         const key = address.toLowerCase();
-        return this.contracts[key] ?? null;
+        const returnValue = this.contracts[key]?.promise ?? null;
+        if (!this.contracts[key]) {
+            this.contracts[key] = {
+                promise: Promise.resolve(false),
+            };
+            this.contracts[key].promise = new Promise((resolve) => {
+                this.contracts[key].resolve = resolve;
+            });
+        }
+        return returnValue;
     }
 
     addContract(address: string, contract: EvmContract) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
-            this.contracts[key] = contract;
+            this.contracts[key] = {
+                promise: Promise.resolve(contract),
+            };
+        } else {
+            if (this.contracts[key].resolve) {
+                this.contracts[key].resolve?.(contract);
+            } else {
+                console.error('Error: Contract already exists', address);
+            }
         }
     }
 
     setContractAsNotExisting(address: string) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
-            this.contracts[key] = false;
+            this.contracts[key] = {
+                promise: Promise.resolve(false),
+            };
+        } else {
+            if (this.contracts[key].resolve) {
+                this.contracts[key].resolve?.(false);
+            } else {
+                console.error('Error: Contract already exists', address);
+            }
         }
     }
 
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index 4c2ed6eef..20b915bfd 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -51,6 +51,7 @@ const RPC_ENDPOINT = {
     path: '/evm',
 };
 
+const API_ENDPOINT = 'https://api-dev.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://testnet.teloscan.io';
 const ECOSYSTEM_URL = 'https://www.telos.net/ecosystem';
@@ -81,6 +82,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return RPC_ENDPOINT;
     }
 
+    getApiEndpoint(): string {
+        return API_ENDPOINT;
+    }
+
     getPriceData(): Promise<PriceChartData> {
         return api.getCoingeckoPriceChartData('telos');
     }
diff --git a/src/antelope/chains/evm/telos-evm/index.ts b/src/antelope/chains/evm/telos-evm/index.ts
index c4e4acdf9..2d98d7581 100644
--- a/src/antelope/chains/evm/telos-evm/index.ts
+++ b/src/antelope/chains/evm/telos-evm/index.ts
@@ -51,6 +51,7 @@ const RPC_ENDPOINT = {
     path: '/evm',
 };
 
+const API_ENDPOINT = 'https://api.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://teloscan.io';
 const ECOSYSTEM_URL = 'https://www.telos.net/ecosystem';
@@ -81,6 +82,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return RPC_ENDPOINT;
     }
 
+    getApiEndpoint(): string {
+        return API_ENDPOINT;
+    }
+
     getPriceData(): Promise<PriceChartData> {
         return api.getCoingeckoPriceChartData('telos');
     }
diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 94c015c7d..0a6c7a1a0 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -178,7 +178,8 @@ export const useBalancesStore = defineStore(store_name, {
             this.trace('updateSystemTokensPrices', label);
             try {
                 // take the three system tokens
-                const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
+                const chain = useChainStore();
+                const chain_settings = chain.getChain(label).settings as EVMChainSettings;
                 const sysToken = chain_settings.getSystemToken();
                 const wrpToken = chain_settings.getWrappedSystemToken();
 
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 9febcf172..04fa53367 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -18,6 +18,8 @@
 import { defineStore } from 'pinia';
 import {
     CURRENT_CONTEXT,
+    useAccountStore,
+    useEVMStore,
     useFeedbackStore,
 } from 'src/antelope';
 
@@ -71,6 +73,7 @@ export interface ChainModel {
 
 export interface EvmChainModel {
     apy: string;
+    stakeRatio: ethers.BigNumber;
     gasPrice: ethers.BigNumber;
     settings: EVMChainSettings;
     tokens: TokenClass[];
@@ -85,11 +88,12 @@ export interface NativeChainModel {
 const newChainModel = (network: string, isNative: boolean): ChainModel => {
     const model = {
         apy: '',
+        stakeRatio: ethers.constants.Zero,
         settings: settings[network],
         tokens: [],
     } as ChainModel;
     if (!isNative) {
-        (model as EvmChainModel).gasPrice = ethers.BigNumber.from(0);
+        (model as EvmChainModel).gasPrice = ethers.constants.Zero;
     }
     return model;
 };
@@ -117,6 +121,7 @@ export const useChainStore = defineStore(store_name, {
         getExplorerUrl: () => (network: string) => (settings[network] as EVMChainSettings).getExplorerUrl(),
         getEcosystemUrl: () => (network: string) => (settings[network] as EVMChainSettings).getEcosystemUrl(),
         getNetworkSettings: () => (network: string) => settings[network],
+        getStakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).stakeRatio ?? ethers.constants.Zero,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -130,6 +135,7 @@ export const useChainStore = defineStore(store_name, {
                     this.updateSettings(label),
                     this.updateApy(label),
                     this.updateGasPrice(label),
+                    this.updateStakedRatio(label),
                 ]);
             } catch (error) {
                 console.error(error);
@@ -154,11 +160,7 @@ export const useChainStore = defineStore(store_name, {
             this.trace('updateApy', label);
             const chain = this.getChain(label);
             try {
-                if (chain.settings.isNative()) {
-                    chain.apy = await (chain.settings as NativeChainSettings).getApy();
-                } else {
-                    chain.apy = '';
-                }
+                chain.apy = await chain.settings.getApy();
             } catch (error) {
                 console.error(error);
                 throw new Error('antelope.chain.error_apy');
@@ -166,6 +168,57 @@ export const useChainStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading('updateApy');
             }
         },
+        async actualUpdateStakedRatio(label: string): Promise<ethers.BigNumber> {
+            // first we need the contract instance to be able to execute queries
+            this.trace('actualUpdateStakedRatio', label);
+            useFeedbackStore().setLoading('actualUpdateStakedRatio');
+            const evm = useEVMStore();
+            const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
+            const sysToken = chain_settings.getSystemToken();
+            const stkToken = chain_settings.getStakedSystemToken();
+            const authenticator = useAccountStore().getEVMAuthenticator(label);
+            if (!authenticator) {
+                useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+                this.trace('actualUpdateStakedRatio', label, '-> no authenticator');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contract = await evm.getContract(authenticator, stkToken.address, stkToken.type);
+            if (!contract) {
+                useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+                this.trace('actualUpdateStakedRatio', label, '-> no contract');
+                return ethers.constants.Zero;
+            }
+            const contractInstance = await contract.getContractInstance();
+            // Now we preview a deposit of 1 SYS to get the ratio
+            const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
+            const ratio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+
+            // Finally we update the store
+            this.setStakedRatio(label, ratio);
+            useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+            return ratio;
+        },
+        async updateStakedRatio(label: string): Promise<ethers.BigNumber> {
+            const accountModel = useAccountStore().getAccount(label);
+            if (accountModel && accountModel.account) {
+                // if the account is already logged, we can update the staked ratio
+                return this.actualUpdateStakedRatio(label);
+            } else {
+                // if the account is not logged, we need to wait for the login and then update the staked ratio
+                return new Promise((resolve) => {
+                    const sub = getAntelope().events.onAccountChanged.subscribe((result) => {
+                        if (result.label === label) {
+                            sub.unsubscribe();
+                            if (result.account) {
+                                // we need the user to be logged because the way of getting the staked ratio is by
+                                // executing an action from contract and that internally attempts retrieve the account from the provided signer
+                                resolve(this.actualUpdateStakedRatio(label));
+                            }
+                        }
+                    });
+                });
+            }
+        },
         async updateGasPrice(label: string): Promise<void> {
             useFeedbackStore().setLoading('updateGasPrice');
             this.trace('updateGasPrice');
@@ -205,6 +258,7 @@ export const useChainStore = defineStore(store_name, {
                 // make the change only if they are different
                 if (network !== this.__chains[label]?.settings.getNetwork()) {
                     this.__chains[label] = newChainModel(network, settings[network].isNative());
+                    this.trace('setChain', label, network, '--> void this.updateChainData(label);');
                     void this.updateChainData(label);
                     getAntelope().events.onNetworkChanged.next(
                         { label, chain: this.__chains[label] },
@@ -214,6 +268,11 @@ export const useChainStore = defineStore(store_name, {
                 throw new AntelopeError('antelope.chain.error_invalid_network', { network });
             }
         },
+        setStakedRatio(label: string, ratio: ethers.BigNumber) {
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
+            (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
+        },
     },
 });
 
diff --git a/src/antelope/stores/evm.ts b/src/antelope/stores/evm.ts
index 684bca268..337385141 100644
--- a/src/antelope/stores/evm.ts
+++ b/src/antelope/stores/evm.ts
@@ -63,7 +63,7 @@ export interface EVMState {
 const store_name = 'evm';
 
 const createManager = (authenticator: EVMAuthenticator):EvmContractManagerI => ({
-    getSigner: async () => toRaw((await authenticator.web3Provider()).getSigner()),
+    getSigner: async () => toRaw((await authenticator.web3Provider()).getSigner(useAccountStore().getAccount(authenticator.label).account)),
     getWeb3Provider: () => authenticator.web3Provider(),
     getFunctionIface: (hash:string) => toRaw(useEVMStore().getFunctionIface(hash)),
     getEventIface: (hash:string) => toRaw(useEVMStore().getEventIface(hash)),
@@ -333,7 +333,8 @@ export const useEVMStore = defineStore(store_name, {
             // Get from already queried contracts, add token data if needed & not present
             // (ie: queried beforehand w/o suspectedToken or a wrong suspectedToken)
             const chain_settings = useChainStore().getChain(authenticator.label).settings as EVMChainSettings;
-            const cached = chain_settings.getContract(addressLower);
+            const cached = await chain_settings.getContract(addressLower);
+            this.trace('getContract', address, 'cached:', cached);
             // If cached is null, it means this is the first time this address is queried
             if (cached !== null) {
                 if (
@@ -348,10 +349,6 @@ export const useEVMStore = defineStore(store_name, {
                 }
             }
 
-
-            // We mark this address as not existing so we don't query it again
-            chain_settings.setContractAsNotExisting(addressLower);
-
             // Then we try to get the contract creation info. If it fails, we never overwrite the previous call to set contract as not existing
             const creationInfo = await this.getContractCreation(authenticator, addressLower);
             // The the contract passes the creation info check,
@@ -370,8 +367,15 @@ export const useEVMStore = defineStore(store_name, {
                 return contract;
             }
 
-            this.trace('getContract', 'returning empty contract', address, creationInfo);
-            return await this.getEmptyContract(authenticator, addressLower, creationInfo);
+            if (creationInfo) {
+                this.trace('getContract', 'returning empty contract', address, creationInfo);
+                return await this.getEmptyContract(authenticator, addressLower, creationInfo);
+            } else {
+                // We mark this address as not existing so we don't query it again
+                this.trace('getContract', 'returning null', address);
+                chain_settings.setContractAsNotExisting(addressLower);
+                return null;
+            }
         },
 
         async checkBucket(authenticator: EVMAuthenticator, address:string): Promise<EvmContractMetadata | null> {
diff --git a/src/antelope/types/ChainSettings.ts b/src/antelope/types/ChainSettings.ts
index ff6ee121b..d21f60f07 100644
--- a/src/antelope/types/ChainSettings.ts
+++ b/src/antelope/types/ChainSettings.ts
@@ -11,11 +11,14 @@ export interface ChainSettings {
     getSmallLogoPath(): string;
     getLargeLogoPath(): string;
     getChainId(): string;
+    getHyperionEndpoint(): string;
     getRPCEndpoint(): RpcEndpoint;
+    getApiEndpoint(): string;
     getPriceData(): Promise<PriceChartData>;
     getUsdPrice(): Promise<number>;
     getSystemTokens(): TokenClass[];
     getNFTsInventory(address: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>;
     getNFTsCollection(contract: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>;
     trackAnalyticsEvent(params: Record<string, unknown>): void;
+    getApy(): Promise<string>;
 }
diff --git a/src/antelope/wallets/index.ts b/src/antelope/wallets/index.ts
index 33b7ee216..c29fab7e1 100644
--- a/src/antelope/wallets/index.ts
+++ b/src/antelope/wallets/index.ts
@@ -26,12 +26,12 @@ export class AntelopeWallets {
         this.trace('getAutenticator', name);
         return this.authenticators.get(name);
     }
+
 }
 
 export * from 'src/antelope/wallets/authenticators/EVMAuthenticator';
 export * from 'src/antelope/wallets/authenticators/InjectedProviderAuth';
 export * from 'src/antelope/wallets/authenticators/MetamaskAuth';
 export * from 'src/antelope/wallets/authenticators/OreIdAuth';
-export * from 'src/antelope/wallets/authenticators/SafePalAuth';
 export * from 'src/antelope/wallets/authenticators/WalletConnectAuth';
 export * from 'src/antelope/wallets/authenticators/SafePalAuth';
diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 9fb48b9c9..a7e94624c 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -5,7 +5,7 @@ import InlineSvg from 'vue-inline-svg';
 import UserInfo from 'components/evm/UserInfo.vue';
 import { getAntelope, useChainStore } from 'src/antelope';
 import EVMLoginButtons from 'pages/home/EVMLoginButtons.vue';
-import { getShortenedHash } from 'src/antelope/stores/utils';
+import { getShortenedHash, prettyPrintBalance } from 'src/antelope/stores/utils';
 
 const ant = getAntelope();
 const accountStore = ant.stores.account;
@@ -25,6 +25,17 @@ export default defineComponent({
         notifyOnSuccessfulLogin: false,
     }),
     computed: {
+        isLoadingApy() {
+            return this.prettyPrintApy === '';
+        },
+        prettyPrintApy() {
+            const apy = chainStore.currentEvmChain?.apy;
+            if (apy) {
+                return apy + '%';
+            } else {
+                return '';
+            }
+        },
         showMenuIcon() {
             return this.$q.screen.lt.md && !this.showBackButton;
         },
@@ -279,7 +290,14 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
+                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }}
+                    <q-spinner
+                        v-if="isLoadingApy"
+                        color="white"
+                        class="c-app-nav__apy-spinner"
+                    />
+                    <b> {{ prettyPrintApy }}</b>
+                </span>
             </li>
 
             <li
@@ -491,6 +509,11 @@ export default defineComponent({
         display: inline-block;
     }
 
+    &__apy-spinner {
+        size: 16px;
+        margin-top: -5px;
+    }
+
     &__icon {
         // svg color overrides
         &--current-route:not(#{$this}__icon--acorn) path {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 1b10f0552..2285e02cd 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -9,6 +9,8 @@ const props = defineProps<{
         secondaryText?: string;
         lowContrastSecondaryText?: boolean;
         useSmallBox?: boolean;
+        isPrimaryLoading?: boolean;
+        isSecondaryLoading?: boolean;
     }[];
 }>();
 </script>
@@ -35,14 +37,23 @@ const props = defineProps<{
             />
         </div>
 
-        <h3>{{ card.primaryText }}</h3>
+        <h3 v-if="card.isPrimaryLoading" >
+            <q-spinner-dots class="c-scrollable-info-cards__primary-loading"  color="primary" />
+        </h3>
+        <h3 v-else class="c-scrollable-info-cards__primary-text">
+            {{ card.primaryText }}
+        </h3>
+
         <span
             v-if="card.secondaryText"
             :class="{
-                'u-text--low-contrast': card.lowContrastSecondaryText
+                'c-scrollable-info-cards__low-contrast': card.lowContrastSecondaryText
             }"
         >
-            {{ card.secondaryText }}
+            <q-spinner-dots v-if="card.isSecondaryLoading" class="c-scrollable-info-cards__secondary-loading" color="primary" />
+            <span v-else class="c-scrollable-info-cards__secondary-text">
+                {{ card.secondaryText }}
+            </span>
         </span>
     </div>
 </div>
@@ -67,6 +78,17 @@ const props = defineProps<{
         margin: auto;
     }
 
+    &__primary-loading {
+        margin-left: 4px;
+    }
+
+    &__secondary-loading {
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
+    }
+
+
     &__card {
         background-color: var(--bg-color);
         padding: 12px;
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3de2c9501..d54e6ffba 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -520,6 +520,7 @@ export default {
             error_update_data: 'Error in updating data',
             error_apy: 'Error in getting APY',
             error_invalid_network: 'Invalid network',
+            error_no_default_authenticator: 'No default authenticator found',
         },
         account: {
             error_login_native: 'An error has occurred trying to login to the native chain',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 52b4b682d..d5fcb9209 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -4,41 +4,70 @@ import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
 import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
-import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
 
 import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
 
-
+const label = 'current';
 const { t: $t } = useI18n();
 const userStore = useUserStore();
 const balancesStore = useBalancesStore();
 const chainStore = useChainStore();
 const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
 // data
-const systemTokenPrice = ref(0); // always equal to wrapped token price
 const loading = ref(true);
 
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
 const fiatCurrency = computed(() => userStore.fiatCurrency);
-const systemTokenName = computed(() => chainSettings.getSystemToken().name);
-const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
-const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
+const systemToken = chainSettings.getSystemToken();
+const stakedToken = chainSettings.getStakedSystemToken();
 
 const totalFiatValueText = ref('$ 4,324.35');
 
-const stakedFiatValueText = ref('$ 4,000.23');
-const stakedTokenBalanceBn = ref(ethers.utils.parseUnits('34021.230', WEI_PRECISION));
+// First cell: Staked
+const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || !stakedRatio.value.isZero());
+const stakedExpressedInSystemBalanceBn = computed(() => {
+    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(stakedRatio.value, stakedToken.decimals);
+        return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const systemTokenPrice = ref(systemToken.price.value);
+const stakedFiatValueBn = computed(() => {
+    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(stakedExpressedInSystemBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+
+// Second cell: Unstaking
 const unstakingFiatValueText = ref('$ 200.72');
-const unstakingBalanceBn = ref(ethers.utils.parseUnits('1242.0312', WEI_PRECISION));
-const withdrawableFiatValueText = ref('$ 123.02');
-const withdrawableBalanceBn = ref(ethers.utils.parseUnits('245.0225', WEI_PRECISION));
+const unstakingBalanceBn = ref(stakedTokenBalanceBn);
 
-const apyPrittyPrint = ref('8.23%');
+// Third cell: Withdrawable
+const withdrawableFiatValueText = ref('$ 123.02');
+const withdrawableBalanceBn = ref(stakedRatio);
+
+const apyPrittyPrint = computed(() => {
+    const apy = chainStore.currentEvmChain?.apy;
+    if (apy) {
+        return apy + '%';
+    } else {
+        return '--';
+    }
+});
+const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref('10 days');
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
@@ -46,44 +75,46 @@ const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
 const evmNetworkName = ref('Telos EVM');
 
 const firstLineData = computed(() => [{
-    label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
-    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
-    primaryText: stakedFiatValueText.value,
-    secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
+    label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
+    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
+    primaryText: prettyPrintToken(stakedFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isStakedLoading.value ? '' : prettyPrintToken(stakedExpressedInSystemBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
+    isPrimaryLoading: isStakedLoading.value,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.unstaking_card_label'),
-    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
     primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.withdrawable_card_label'),
-    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
     primaryText: withdrawableFiatValueText.value,
-    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemTokenSymbol.value),
+    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }]);
 
 const secondLineData = computed(() => [{
-    label: $t('evm_stake.apy_card_label', { symbol: systemTokenSymbol.value }),
-    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    label: $t('evm_stake.apy_card_label', { symbol: systemToken.symbol }),
+    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
     secondaryText: apyPrittyPrint.value,
     lowContrastSecondaryText: false,
+    isSecondaryLoading: apyisLoading.value,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.unstaking_period_card_label'),
-    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
     secondaryText: unlockPeriod.value,
     lowContrastSecondaryText: false,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.tvl_card_label'),
-    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
-    secondaryText: prettyPrintToken(tvlAmountBn.value, systemTokenSymbol.value),
+    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
+    secondaryText: prettyPrintToken(tvlAmountBn.value, systemToken.symbol),
     lowContrastSecondaryText: false,
     useSmallBox: true,
 }]);
@@ -92,7 +123,7 @@ const secondLineData = computed(() => [{
 // methods
 onBeforeMount(() => {
     chainSettings.getUsdPrice().then((price) => {
-        systemTokenPrice.value = price;
+        // systemTokenPrice.value = price;
     }).finally(() => {
         loading.value = false;
     });
@@ -114,7 +145,7 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 <template>
 <div class="c-staking-header">
     <div class="text-center q-mb-xl">
-        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemTokenName }) }}</h5>
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 

From a994b817b100a1946263b8b6007df00b775985e3 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 23 Aug 2023 14:01:24 -0300
Subject: [PATCH 099/268] saving WIP

---
 src/antelope/stores/chain.ts                | 21 +++++++++++++++------
 src/pages/evm/staking/StakingPageHeader.vue | 11 +++++++++--
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 04fa53367..fea5050b1 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -74,6 +74,7 @@ export interface ChainModel {
 export interface EvmChainModel {
     apy: string;
     stakeRatio: ethers.BigNumber;
+    unstakeRatio: ethers.BigNumber;
     gasPrice: ethers.BigNumber;
     settings: EVMChainSettings;
     tokens: TokenClass[];
@@ -89,6 +90,7 @@ const newChainModel = (network: string, isNative: boolean): ChainModel => {
     const model = {
         apy: '',
         stakeRatio: ethers.constants.Zero,
+        unstakeRatio: ethers.constants.Zero,
         settings: settings[network],
         tokens: [],
     } as ChainModel;
@@ -122,6 +124,7 @@ export const useChainStore = defineStore(store_name, {
         getEcosystemUrl: () => (network: string) => (settings[network] as EVMChainSettings).getEcosystemUrl(),
         getNetworkSettings: () => (network: string) => settings[network],
         getStakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).stakeRatio ?? ethers.constants.Zero,
+        getUnstakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).unstakeRatio ?? ethers.constants.Zero,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -168,7 +171,7 @@ export const useChainStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading('updateApy');
             }
         },
-        async actualUpdateStakedRatio(label: string): Promise<ethers.BigNumber> {
+        async actualUpdateStakedRatio(label: string): Promise<void> {
             // first we need the contract instance to be able to execute queries
             this.trace('actualUpdateStakedRatio', label);
             useFeedbackStore().setLoading('actualUpdateStakedRatio');
@@ -186,19 +189,20 @@ export const useChainStore = defineStore(store_name, {
             if (!contract) {
                 useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
                 this.trace('actualUpdateStakedRatio', label, '-> no contract');
-                return ethers.constants.Zero;
+                return;
             }
             const contractInstance = await contract.getContractInstance();
             // Now we preview a deposit of 1 SYS to get the ratio
             const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
-            const ratio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+            const stakedRatio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+            const unstakedRatio:ethers.BigNumber = await contractInstance.previewWithdraw(oneSys);
 
             // Finally we update the store
-            this.setStakedRatio(label, ratio);
+            this.setStakedRatio(label, stakedRatio);
+            this.setUnstakedRatio(label, unstakedRatio);
             useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
-            return ratio;
         },
-        async updateStakedRatio(label: string): Promise<ethers.BigNumber> {
+        async updateStakedRatio(label: string): Promise<void> {
             const accountModel = useAccountStore().getAccount(label);
             if (accountModel && accountModel.account) {
                 // if the account is already logged, we can update the staked ratio
@@ -273,6 +277,11 @@ export const useChainStore = defineStore(store_name, {
             this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
         },
+        setUnstakedRatio(label: string, ratio: ethers.BigNumber) {
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            this.trace('setUnstakedRatio', label, ratio.toString(), ratioNumber);
+            (this.__chains[label] as EvmChainModel).unstakeRatio = ratio;
+        },
     },
 });
 
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index d5fcb9209..65b9bee54 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -32,10 +32,14 @@ const totalFiatValueText = ref('$ 4,324.35');
 // First cell: Staked
 const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
 const stakedRatio = computed(() => chainStore.getStakedRatio(label));
-const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || !stakedRatio.value.isZero());
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
     if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
-        const ratioNumber = ethers.utils.formatUnits(stakedRatio.value, stakedToken.decimals);
+        console.log('stakedRatio', stakedRatio.value.toString());
+        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
+        console.log('inverseRatio', inverseRatio.toString());
+        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
+        console.log('ratioNumber', ratioNumber);
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -149,6 +153,9 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 
+    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
+    <div>{{ stakedRatio?.toString() }}</div>
+
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 845ec56fe364c02a92ab578406bbb9218907afc3 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 24 Aug 2023 20:00:04 -0300
Subject: [PATCH 100/268] Fetching real Rex data for the staking page header

---
 src/antelope/chains/EVMChainSettings.ts       |   1 +
 .../chains/evm/telos-evm-testnet/index.ts     |   6 +-
 src/antelope/chains/evm/telos-evm/index.ts    |   6 +-
 src/antelope/stores/rex.ts                    | 141 +++++++++++++++++-
 src/pages/evm/staking/StakingPageHeader.vue   |  65 ++++++--
 5 files changed, 200 insertions(+), 19 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 2675466b3..b406f0d5d 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -216,6 +216,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract getSystemToken(): TokenClass;
     abstract getStakedSystemToken(): TokenClass;
     abstract getWrappedSystemToken(): TokenClass;
+    abstract getEscrowContractAddress(): string;
     abstract getChainId(): string;
     abstract getDisplay(): string;
     abstract getHyperionEndpoint(): string;
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index 20b915bfd..7f1778c14 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -50,7 +50,7 @@ const RPC_ENDPOINT = {
     port: 443,
     path: '/evm',
 };
-
+const ESCROW_CONTRACT_ADDRESS = '0x7E9cF9fBc881652B05BB8F26298fFAB538163b6f';
 const API_ENDPOINT = 'https://api-dev.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://testnet.teloscan.io';
@@ -102,6 +102,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return W_TOKEN;
     }
 
+    getEscrowContractAddress(): string {
+        return ESCROW_CONTRACT_ADDRESS;
+    }
+
     async getUsdPrice(): Promise<number> {
         if (this.hasIndexerSupport()) {
             const nativeTokenSymbol = this.getSystemToken().symbol;
diff --git a/src/antelope/chains/evm/telos-evm/index.ts b/src/antelope/chains/evm/telos-evm/index.ts
index 2d98d7581..06a4538fc 100644
--- a/src/antelope/chains/evm/telos-evm/index.ts
+++ b/src/antelope/chains/evm/telos-evm/index.ts
@@ -50,7 +50,7 @@ const RPC_ENDPOINT = {
     port: 443,
     path: '/evm',
 };
-
+const ESCROW_CONTRACT_ADDRESS = '0x95F5713A1422Aa3FBD3DCB8D553945C128ee3855';
 const API_ENDPOINT = 'https://api.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://teloscan.io';
@@ -102,6 +102,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return W_TOKEN;
     }
 
+    getEscrowContractAddress(): string {
+        return ESCROW_CONTRACT_ADDRESS;
+    }
+
     async getUsdPrice(): Promise<number> {
         if (this.hasIndexerSupport()) {
             const nativeTokenSymbol = this.getSystemToken().symbol;
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 6c4006b34..50198bcd6 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -5,14 +5,47 @@
  * the state of that account in the REX system.
  */
 
+import { ethers } from 'ethers';
 import { defineStore } from 'pinia';
+import { filter } from 'rxjs';
 import {
-    createInitFunction,
+    isTracingAll,
     createTraceFunction,
+    useFeedbackStore,
 } from 'src/antelope/stores/feedback';
+import { AntelopeError, Label } from 'src/antelope/types';
+import { toRaw } from 'vue';
+import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
+import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+
+
+
+export interface EvmRexDeposit {
+    amount: ethers.BigNumber;
+    until: ethers.BigNumber;
+}
+
+export interface RexModel {
+    withdrawable: ethers.BigNumber;
+    balance: ethers.BigNumber;
+    totalStaking: ethers.BigNumber;
+}
+
+export interface NativeRexModel extends RexModel {
+    _: boolean; // dummy property to avoid lint issues
+}
+
+export interface EvmRexModel extends RexModel {
+    withdrawable: ethers.BigNumber;
+    deposits: EvmRexDeposit[];
+    balance: ethers.BigNumber;
+    totalStaking: ethers.BigNumber;
+}
+
 
 export interface RexState {
-    __: string;
+    __rexData: { [label: Label]: RexModel };
 }
 
 const store_name = 'rex';
@@ -20,13 +53,113 @@ const store_name = 'rex';
 export const useRexStore = defineStore(store_name, {
     state: (): RexState => (rexInitialState),
     getters: {
+        getRexData: state => (label: string) => state.__rexData[label] ?? null,
     },
     actions: {
         trace: createTraceFunction(store_name),
-        init: createInitFunction(store_name),
+        init: () => {
+            useFeedbackStore().setDebug(store_name, isTracingAll());
+            getAntelope().events.onAccountChanged.pipe(
+                filter(({ label, account }) => !!label && !!account),
+            ).subscribe({
+                next: async ({ label, account }) => {
+                    if (label === 'current') {
+                        await useRexStore().updateRexDataForAccount(label, toRaw(account));
+                    }
+                },
+            });
+        },
+        async getContractInstance(label: string, address: string) {
+            const authenticator = useAccountStore().getEVMAuthenticator(label);
+            if (!authenticator) {
+                this.trace('getStakedSystemContractInstance', label, '-> no authenticator');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contract = await useEVMStore().getContract(authenticator, address);
+            if (!contract) {
+                this.trace('getStakedSystemContractInstance', label, '-> no contract');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contractInstance = await contract.getContractInstance();
+            return contractInstance;
+        },
+        async getStakedSystemContractInstance(label: string) {
+            const address = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().address;
+            return this.getContractInstance(label, address);
+        },
+        async getEscrowContractInstance(label: string) {
+            const address = (useChainStore().getChain(label).settings as EVMChainSettings).getEscrowContractAddress();
+            return this.getContractInstance(label, address);
+        },
+        async updateTotalStaking(label: string) {
+            this.trace('updateTotalStaking', label);
+            const contract = await this.getStakedSystemContractInstance(label);
+            const totalStaking = await contract.totalAssets();
+            this.setTotalStaking(label, totalStaking);
+        },
+        async updateRexDataForAccount(label: string, account: AccountModel | null) {
+            this.trace('updateRexDataForAccount', label, account);
+            useFeedbackStore().setLoading('updateRexDataForAccount');
+            try {
+                await Promise.all([
+                    this.updateWithdrawable(label),
+                    this.updateDeposits(label),
+                    this.updateBalance(label),
+                    this.updateTotalStaking(label),
+                ]);
+            } catch (error) {
+                console.error(error);
+                useFeedbackStore().unsetLoading('updateRexDataForAccount');
+            }
+        },
+        async updateWithdrawable(label: string) {
+            this.trace('updateWithdrawable', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const withdrawable = await contract.maxWithdraw(address);
+            this.setWithdrawable(label, withdrawable);
+        },
+        async updateDeposits(label: string) {
+            this.trace('updateDeposits', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const deposits = await contract.depositsOf(address);
+            this.setDeposits(label, deposits);
+        },
+        async updateBalance(label: string) {
+            this.trace('updateBalance', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const balance = await contract.balanceOf(address);
+            this.setBalance(label, balance);
+        },
+        // commits ---------------
+        setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(withdrawable, 18));
+            this.trace('setWithdrawable', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).withdrawable = withdrawable;
+        },
+        setDeposits(label: string, deposits: EvmRexDeposit[]) {
+            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, 18))));
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).deposits = deposits;
+        },
+        setBalance(label: string, balance: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(balance, 18));
+            this.trace('setBalance', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).balance = balance;
+        },
+        setTotalStaking(label: string, totalStaking: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(totalStaking, 18));
+            this.trace('setTotalStaking', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).totalStaking = totalStaking;
+        },
     },
 });
 
 const rexInitialState: RexState = {
-    __: '',
+    __rexData: {},
 };
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 65b9bee54..c602a537d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -3,7 +3,7 @@ import { computed, onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
-import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
+import { useUserStore, useBalancesStore, useChainStore, useRexStore } from 'src/antelope';
 import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
@@ -45,9 +45,9 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = ref(systemToken.price.value);
+const systemTokenPrice = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value);
 const stakedFiatValueBn = computed(() => {
-    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value) {
+    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
         return convertCurrency(stakedExpressedInSystemBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
     } else {
@@ -56,12 +56,42 @@ const stakedFiatValueBn = computed(() => {
 });
 
 // Second cell: Unstaking
-const unstakingFiatValueText = ref('$ 200.72');
-const unstakingBalanceBn = ref(stakedTokenBalanceBn);
+const unstakingBalanceBn = computed(() => {
+    const rexData = useRexStore().getRexData(label);
+    if (rexData) {
+        const totalBalance = rexData.balance;
+        const withdrawableBalance = rexData.withdrawable;
+        if (totalBalance && withdrawableBalance) {
+            return totalBalance.sub(withdrawableBalance);
+        } else {
+            return undefined;
+        }
+    } else {
+        return undefined;
+    }
+});
+const unstakingFiatValueBn = computed(() => {
+    if (unstakingBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(unstakingBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const isUnstakingLoading = computed(() => unstakingBalanceBn.value === undefined);
 
 // Third cell: Withdrawable
-const withdrawableFiatValueText = ref('$ 123.02');
-const withdrawableBalanceBn = ref(stakedRatio);
+const withdrawableBalanceBn = computed(() => useRexStore().getRexData(label)?.withdrawable);
+const withdrawableFiatValueBn = computed(() => {
+    if (withdrawableBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(withdrawableBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const isWithdrawableLoading = computed(() => withdrawableBalanceBn.value === undefined);
+
 
 const apyPrittyPrint = computed(() => {
     const apy = chainStore.currentEvmChain?.apy;
@@ -75,8 +105,15 @@ const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref('10 days');
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
-const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
-const evmNetworkName = ref('Telos EVM');
+const tvlAmountBn = computed(() => {
+    const totalStaking = useRexStore().getRexData(label)?.totalStaking;
+    if (totalStaking) {
+        return totalStaking;
+    } else {
+        return undefined;
+    }
+});
+const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
 const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
@@ -89,16 +126,18 @@ const firstLineData = computed(() => [{
 }, {
     label: $t('evm_stake.unstaking_card_label'),
     tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
-    primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
+    primaryText: prettyPrintToken(unstakingFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isUnstakingLoading.value ? '' : prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
+    isPrimaryLoading: isUnstakingLoading.value,
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.withdrawable_card_label'),
     tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
-    primaryText: withdrawableFiatValueText.value,
-    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
+    primaryText: prettyPrintToken(withdrawableFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isWithdrawableLoading.value ? '' : prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
+    isPrimaryLoading: isWithdrawableLoading.value,
     useSmallBox: true,
 }]);
 

From ce0f768a3d13c1b757c3ae083efdf674315d0ebb Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 10:19:53 -0300
Subject: [PATCH 101/268] addressing feedback

---
 src/antelope/chains/EVMChainSettings.ts     | 18 ++++++++++++
 src/components/evm/ScrollableInfoCards.vue  |  6 +++-
 src/i18n/en-us/index.js                     |  7 +++--
 src/pages/evm/staking/StakingPageHeader.vue | 32 ++++++++++-----------
 4 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index b406f0d5d..d09580c80 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -364,6 +364,14 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return `${token.symbol}-${token.address}-${this.getNetwork()}`;
     }
 
+    /**
+     * This method returns the cached value for the requested contract which can be one of three values:
+     * - Promise<EvmContract> if the contract is already cached
+     * - Promise<null> if the contract was never requested before
+     * - Promise<false> if the contract was requested, not found and set as not existing (to avoid requesting it again)
+     * @param address contract requested
+     * @returns Promise for the requested contract or false if it doesn't exist
+     */
     async getContract(address: string): Promise<EvmContract | false | null> {
         const key = address.toLowerCase();
         const returnValue = this.contracts[key]?.promise ?? null;
@@ -378,6 +386,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return returnValue;
     }
 
+    /**
+     * This method adds a contract to the cache and resolves the promise for it
+     * @param address address of the contract
+     * @param contract contract instance to be cached
+     */
     addContract(address: string, contract: EvmContract) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
@@ -393,6 +406,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
         }
     }
 
+    /**
+     * This method sets a contract as not existing and resolves the promise to false for it.
+     * This is done to distinguish between a contract that was never requested before and one that was requested and not found.
+     * @param address address of the contract
+     */
     setContractAsNotExisting(address: string) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 2285e02cd..d05e600b5 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -26,7 +26,7 @@ const props = defineProps<{
         }"
     >
         <div class="c-scrollable-info-cards__card-header">
-            <h5 class="u-text--low-contrast">
+            <h5 class="c-scrollable-info-cards__card-header-label u-text--low-contrast">
                 {{ card.label }}
             </h5>
 
@@ -110,5 +110,9 @@ const props = defineProps<{
         justify-content: space-between;
         margin-bottom: 4px;
     }
+
+    &__card-header-label {
+        white-space: nowrap;
+    }
 }
 </style>
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index d54e6ffba..161bacbd4 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -190,7 +190,7 @@ export default {
         unwrap_input_label: 'Unwrapping Amount',
     },
     evm_stake: {
-        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdrawable {token}',
         staked_card_label: 'Staked {symbol}',
         staked_card_tooltip: 'Staked tokens:\n\n' +
         'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
@@ -201,8 +201,8 @@ export default {
         'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
-        withdrawable_card_label: 'Withdraw-able',
-        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        withdrawable_card_label: 'withdrawable',
+        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
@@ -220,6 +220,7 @@ export default {
         tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
         'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
+        unstaking_period: '10 days',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index c602a537d..972d3e6b9 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -17,9 +17,6 @@ const userStore = useUserStore();
 const balancesStore = useBalancesStore();
 const chainStore = useChainStore();
 const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
-// data
-const loading = ref(true);
-
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
@@ -27,7 +24,6 @@ const fiatCurrency = computed(() => userStore.fiatCurrency);
 const systemToken = chainSettings.getSystemToken();
 const stakedToken = chainSettings.getStakedSystemToken();
 
-const totalFiatValueText = ref('$ 4,324.35');
 
 // First cell: Staked
 const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
@@ -102,7 +98,7 @@ const apyPrittyPrint = computed(() => {
     }
 });
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
-const unlockPeriod = ref('10 days');
+const unlockPeriod = ref($t('evm_stake.unstaking_period'));
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
 const tvlAmountBn = computed(() => {
@@ -115,6 +111,14 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
+// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
+const totalFiatValueBn = computed(() => {
+    const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
+    const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
+    const withdrawableFiatValue = withdrawableFiatValueBn.value ?? BigNumber.from(0);
+    return stakedFiatValue.add(unstakingFiatValue).add(withdrawableFiatValue);
+});
+
 const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
     tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
@@ -162,20 +166,14 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
-
-// methods
-onBeforeMount(() => {
-    chainSettings.getUsdPrice().then((price) => {
-        // systemTokenPrice.value = price;
-    }).finally(() => {
-        loading.value = false;
-    });
-});
-
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
+    let decimals = symbol === fiatCurrency.value ? 2 : 4;
+    if (!amount || amount.isZero()) {
+        decimals = 1;
+    }
     return prettyPrintCurrency(
         amount ?? BigNumber.from(0),
-        4,
+        decimals,
         fiatLocale.value,
         false,
         symbol,
@@ -189,7 +187,7 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 <div class="c-staking-header">
     <div class="text-center q-mb-xl">
         <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
-        <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
+        <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
     <div>{{ stakedTokenBalanceBn?.toString() }}</div>

From 516142eaa3a3c8a882a2d9472fd7644370a7d281 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 14:17:28 -0300
Subject: [PATCH 102/268] merging two functions into one

---
 src/antelope/chains/EVMChainSettings.ts | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index d09580c80..e229a303c 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -391,7 +391,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      * @param contract contract instance to be cached
      */
-    addContract(address: string, contract: EvmContract) {
+    addContract(address: string, contract: EvmContract | false) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
             this.contracts[key] = {
@@ -412,18 +412,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      */
     setContractAsNotExisting(address: string) {
-        const key = address.toLowerCase();
-        if (!this.contracts[key]) {
-            this.contracts[key] = {
-                promise: Promise.resolve(false),
-            };
-        } else {
-            if (this.contracts[key].resolve) {
-                this.contracts[key].resolve?.(false);
-            } else {
-                console.error('Error: Contract already exists', address);
-            }
-        }
+        return this.addContract(address, false);
     }
 
     async getEVMTransactions(filter: IndexerTransactionsFilter): Promise<IndexerAccountTransactionsResponse> {

From 5907229e9c5a13b6ee6d6bdea70b6cadf0214d21 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 11:25:05 -0300
Subject: [PATCH 103/268] addressing Erza's feedback

---
 src/antelope/chains/EVMChainSettings.ts     |  5 +-
 src/antelope/stores/chain.ts                |  6 +-
 src/antelope/stores/rex.ts                  | 62 ++++++++++++++++++---
 src/antelope/stores/utils/currency-utils.ts |  5 +-
 src/antelope/types/TokenClass.ts            |  6 +-
 src/pages/evm/staking/StakingPageHeader.vue | 19 +++++--
 src/pages/evm/wallet/SendPage.vue           | 10 ++--
 7 files changed, 88 insertions(+), 25 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index e229a303c..504cc0ca7 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -28,6 +28,7 @@ import { ethers } from 'ethers';
 import { toStringNumber } from 'src/antelope/stores/utils/currency-utils';
 import { dateIsWithinXMinutes } from 'src/antelope/stores/utils/date-utils';
 import { getAntelope } from 'src/antelope';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 
 export default abstract class EVMChainSettings implements ChainSettings {
@@ -525,10 +526,10 @@ export default abstract class EVMChainSettings implements ChainSettings {
     async getEstimatedGas(limit: number): Promise<{ system:ethers.BigNumber, fiat:ethers.BigNumber }> {
         const gasPrice: ethers.BigNumber = await this.getGasPrice();
         const tokenPrice: number = await this.getUsdPrice();
-        const price = ethers.utils.parseUnits(toStringNumber(tokenPrice), 18);
+        const price = ethers.utils.parseUnits(toStringNumber(tokenPrice), WEI_PRECISION);
         const system = gasPrice.mul(limit);
         const fiatDouble = system.mul(price);
-        const fiat = fiatDouble.div(ethers.utils.parseUnits('1', 18));
+        const fiat = fiatDouble.div(ethers.utils.parseUnits('1', WEI_PRECISION));
         return { system, fiat };
     }
     async getLatestBlock(): Promise<ethers.BigNumber> {
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index fea5050b1..9acd20397 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -273,12 +273,14 @@ export const useChainStore = defineStore(store_name, {
             }
         },
         setStakedRatio(label: string, ratio: ethers.BigNumber) {
-            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            const decimals = (this.getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
             this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
         },
         setUnstakedRatio(label: string, ratio: ethers.BigNumber) {
-            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            const decimals = (this.getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
             this.trace('setUnstakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).unstakeRatio = ratio;
         },
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 50198bcd6..f154ed6fd 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -18,6 +18,7 @@ import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
 import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 
 
@@ -69,6 +70,12 @@ export const useRexStore = defineStore(store_name, {
                 },
             });
         },
+        /**
+         * auxiliar method to get a contract instance. Only used internally.
+         * @param label identifies the context (network on this case) for the data
+         * @param address the contract address
+         * @returns the contract instance
+         */
         async getContractInstance(label: string, address: string) {
             const authenticator = useAccountStore().getEVMAuthenticator(label);
             if (!authenticator) {
@@ -83,35 +90,60 @@ export const useRexStore = defineStore(store_name, {
             const contractInstance = await contract.getContractInstance();
             return contractInstance;
         },
+        /**
+         * auxiliar method to get the staked system contract instance
+         * @param label identifies the context (network on this case) for the data
+         * @returns the contract instance
+         */
         async getStakedSystemContractInstance(label: string) {
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().address;
             return this.getContractInstance(label, address);
         },
+        /**
+         * auxiliar method to get the escrow contract instance
+         * @param label identifies the context (network on this case) for the data
+         * @returns the contract instance
+         */
         async getEscrowContractInstance(label: string) {
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getEscrowContractAddress();
             return this.getContractInstance(label, address);
         },
+        /**
+         * This method queries the total amount of staked tokens in the system and maintains it in the store.
+         * @param label identifies the context (network on this case) for the data
+         */
         async updateTotalStaking(label: string) {
             this.trace('updateTotalStaking', label);
             const contract = await this.getStakedSystemContractInstance(label);
             const totalStaking = await contract.totalAssets();
             this.setTotalStaking(label, totalStaking);
         },
+        /**
+         * This method shopuld be called to quiery the REX data for a given account,
+         * along with the current stato of the total staked tokens on the system.
+         * @param label identifies the context (network on this case) for the data
+         * @param account the account to update the data for
+         */
         async updateRexDataForAccount(label: string, account: AccountModel | null) {
             this.trace('updateRexDataForAccount', label, account);
             useFeedbackStore().setLoading('updateRexDataForAccount');
             try {
                 await Promise.all([
-                    this.updateWithdrawable(label),
-                    this.updateDeposits(label),
-                    this.updateBalance(label),
-                    this.updateTotalStaking(label),
+                    this.updateWithdrawable(label),  // account's data
+                    this.updateDeposits(label),      // account's data
+                    this.updateBalance(label),       // account's data
+                    this.updateTotalStaking(label),  // system's data
                 ]);
             } catch (error) {
                 console.error(error);
                 useFeedbackStore().unsetLoading('updateRexDataForAccount');
             }
         },
+        /**
+         * This method queries the withdrawable amount for a given account and maintains it in the store.
+         * The withdrawable amount is the amount of tokens that can be withdrawn from the REX system right now.
+         * @param label identifies the context (account-network) for the data
+         */
         async updateWithdrawable(label: string) {
             this.trace('updateWithdrawable', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -119,6 +151,12 @@ export const useRexStore = defineStore(store_name, {
             const withdrawable = await contract.maxWithdraw(address);
             this.setWithdrawable(label, withdrawable);
         },
+        /**
+         * This method queries the deposits for a given account and maintains it in the store.
+         * The deposits contains a list of individual whitdrawls attempts, each with an amount and a date.
+         * If the date is in the future, the amount is not available for withdrawal yet.
+         * @param label identifies the context (account-network) for the data
+         */
         async updateDeposits(label: string) {
             this.trace('updateDeposits', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -126,6 +164,11 @@ export const useRexStore = defineStore(store_name, {
             const deposits = await contract.depositsOf(address);
             this.setDeposits(label, deposits);
         },
+        /**
+         * This method queries the balance for a given account and maintains it in the store.
+         * The account's balance is the sum of all the deposits (withdrawable or not)
+         * @param label identifies the context (account-network) for the data
+         */
         async updateBalance(label: string) {
             this.trace('updateBalance', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -133,26 +176,29 @@ export const useRexStore = defineStore(store_name, {
             const balance = await contract.balanceOf(address);
             this.setBalance(label, balance);
         },
+        getStakingDecimals() {
+            return useChainStore().currentEvmChain?.settings.getStakedSystemToken().decimals || WEI_PRECISION;
+        },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(withdrawable, 18));
+            const num = parseFloat(ethers.utils.formatUnits(withdrawable, this.getStakingDecimals()));
             this.trace('setWithdrawable', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).withdrawable = withdrawable;
         },
         setDeposits(label: string, deposits: EvmRexDeposit[]) {
-            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, 18))));
+            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, this.getStakingDecimals()))));
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).deposits = deposits;
         },
         setBalance(label: string, balance: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(balance, 18));
+            const num = parseFloat(ethers.utils.formatUnits(balance, this.getStakingDecimals()));
             this.trace('setBalance', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).balance = balance;
         },
         setTotalStaking(label: string, totalStaking: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(totalStaking, 18));
+            const num = parseFloat(ethers.utils.formatUnits(totalStaking, this.getStakingDecimals()));
             this.trace('setTotalStaking', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).totalStaking = totalStaking;
diff --git a/src/antelope/stores/utils/currency-utils.ts b/src/antelope/stores/utils/currency-utils.ts
index 5da419231..5c6998d8e 100644
--- a/src/antelope/stores/utils/currency-utils.ts
+++ b/src/antelope/stores/utils/currency-utils.ts
@@ -2,6 +2,7 @@ import { BigNumber } from 'ethers';
 import { parseUnits } from 'ethers/lib/utils';
 import { formatUnits } from '@ethersproject/units';
 import Decimal from 'decimal.js';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 /**
  * Given a number or string, returns a string representation of the number with up to 18 decimal places
@@ -14,7 +15,7 @@ export function toStringNumber(value: number | string): string {
         return value;
     } else if (typeof value === 'number') {
         const num = new Decimal(value);
-        return num.toFixed(18);
+        return num.toFixed(WEI_PRECISION);
     } else {
         throw new Error('Invalid value type: ' + typeof value);
     }
@@ -309,7 +310,7 @@ export function getFloatReciprocal(float: number | string) {
 
     return new Decimal(1)
         .dividedBy(float)
-        .toFixed(18)
+        .toFixed(WEI_PRECISION)
         .replace(trailingZeroesRegex, '')
         .replace(trailingDotRegex, '');
 }
diff --git a/src/antelope/types/TokenClass.ts b/src/antelope/types/TokenClass.ts
index 7d372a7d0..54f048872 100644
--- a/src/antelope/types/TokenClass.ts
+++ b/src/antelope/types/TokenClass.ts
@@ -1,5 +1,5 @@
 import { ethers } from 'ethers';
-import { formatWei } from 'src/antelope/stores/utils';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
 import { toStringNumber } from 'src/antelope/stores/utils/currency-utils';
 
 export const TOKEN_PRICE_DECIMALS = 18;
@@ -89,7 +89,7 @@ export class TokenPrice {
     }
 
     get decimals(): number {
-        return this.market?.info.decimals || 18;
+        return this.market?.info.decimals || TOKEN_PRICE_DECIMALS;
     }
 
     // Returns the token price as BigNumber
@@ -193,7 +193,7 @@ export class TokenClass implements TokenSourceInfo {
         this.chainId = sourceInfo.chainId;
         this.network = sourceInfo.network;
         this.name = sourceInfo.name;
-        this.decimals = sourceInfo.decimals ?? sourceInfo.precision ?? 18;
+        this.decimals = sourceInfo.decimals ?? sourceInfo.precision ?? WEI_PRECISION;
         this.isSystem = sourceInfo.isSystem;
         this.isNative = sourceInfo.isNative;
         this.logo = sourceInfo.logo ?? sourceInfo.logoURI;
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 972d3e6b9..6d2d5bd62 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
@@ -41,7 +41,7 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value);
+const systemTokenPrice = ref(undefined as BigNumber | undefined);
 const stakedFiatValueBn = computed(() => {
     if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
@@ -51,6 +51,19 @@ const stakedFiatValueBn = computed(() => {
     }
 });
 
+// watch the balances store to update the staked token balance and the system token price
+watch(() => balancesStore.getBalances(label), (balances) => {
+    const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
+    if (stakedTokenBalance) {
+        stakedTokenBalanceBn.value = stakedTokenBalance;
+    }
+    const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
+    if (systemTokenPriceBalance) {
+        systemTokenPrice.value = systemTokenPriceBalance;
+    }
+});
+
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);
@@ -100,7 +113,6 @@ const apyPrittyPrint = computed(() => {
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref($t('evm_stake.unstaking_period'));
 
-// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
 const tvlAmountBn = computed(() => {
     const totalStaking = useRexStore().getRexData(label)?.totalStaking;
     if (totalStaking) {
@@ -111,7 +123,6 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
-// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
 const totalFiatValueBn = computed(() => {
     const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
     const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
diff --git a/src/pages/evm/wallet/SendPage.vue b/src/pages/evm/wallet/SendPage.vue
index 54e345777..761a96f95 100644
--- a/src/pages/evm/wallet/SendPage.vue
+++ b/src/pages/evm/wallet/SendPage.vue
@@ -4,7 +4,7 @@ import AppPage from 'components/evm/AppPage.vue';
 import UserInfo from 'components/evm/UserInfo.vue';
 import { CURRENT_CONTEXT, getAntelope, useAccountStore, useChainStore, useUserStore } from 'src/antelope';
 import { TransactionResponse, TokenClass, TokenBalance, NativeCurrencyAddress, AntelopeError } from 'src/antelope/types';
-import { formatWei, prettyPrintBalance, prettyPrintFiatBalance } from 'src/antelope/stores/utils';
+import { WEI_PRECISION, formatWei, prettyPrintBalance, prettyPrintFiatBalance } from 'src/antelope/stores/utils';
 import { BigNumber, ethers } from 'ethers';
 import CurrencyInput from 'components/evm/inputs/CurrencyInput.vue';
 import AddressInput from 'components/evm/inputs/AddressInput.vue';
@@ -103,11 +103,13 @@ export default defineComponent({
         },
         gasFeeInSystemSym() {
             const symbol = chainStore.loggedChain.settings.getSystemToken().symbol;
-            const gas = `${formatWei(this.estimatedGas.system, 18, 18)}`;
+            const decimals = chainStore.loggedChain.settings.getSystemToken().decimals;
+            const gas = `${formatWei(this.estimatedGas.system, decimals, WEI_PRECISION)}`;
             return prettyPrintBalance(gas, userStore.fiatLocale, this.isMobile, symbol);
         },
         gasFeeInFiat() {
-            const gasFiat = `${formatWei(this.estimatedGas.fiat, 18, 18)}`;
+            const decimals = chainStore.loggedChain.settings.getSystemToken().decimals;
+            const gasFiat = `${formatWei(this.estimatedGas.fiat, decimals, WEI_PRECISION)}`;
             return prettyPrintFiatBalance(gasFiat, userStore.fiatLocale, this.isMobile, userStore.fiatCurrency);
         },
         isMobile(): boolean {
@@ -247,7 +249,7 @@ 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, 18)} ${token.symbol}`;
+                        const quantity = `${formatWei(amount, token.decimals, WEI_PRECISION)} ${token.symbol}`;
                         const address = to.substring(0, 6) + '...' + to.substring(to.length - 4, to.length);
                         const dismiss = ant.config.notifyNeutralMessageHandler(
                             this.$t('notification.neutral_message_sending', { quantity, address }),

From f8230839051a48a4433ad99124189881c0392a32 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Tue, 29 Aug 2023 17:30:08 -0400
Subject: [PATCH 104/268] fix capitalization

---
 src/i18n/en-us/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 161bacbd4..ba57fa046 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -202,7 +202,7 @@ export default {
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
         withdrawable_card_label: 'withdrawable',
-        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
+        withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',

From e427d44b9362f4aae130d3eb1413b2d7f5ea3526 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 14:07:23 -0300
Subject: [PATCH 105/268] rebasing with source branch

---
 src/antelope/stores/balances.ts             | 23 +++++++++++++++++++++
 src/antelope/stores/chain.ts                |  2 +-
 src/i18n/en-us/index.js                     |  6 ++----
 src/pages/evm/staking/StakingPageHeader.vue | 17 +++++----------
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 0a6c7a1a0..33c37b4eb 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -51,6 +51,7 @@ import {
 import { AccountModel, EvmAccountModel } from 'src/antelope/stores/account';
 import { EVMAuthenticator } from 'src/antelope/wallets';
 import { filter } from 'rxjs';
+import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
 
 export interface BalancesState {
     __balances:  { [label: Label]: TokenBalance[] };
@@ -182,6 +183,7 @@ export const useBalancesStore = defineStore(store_name, {
                 const chain_settings = chain.getChain(label).settings as EVMChainSettings;
                 const sysToken = chain_settings.getSystemToken();
                 const wrpToken = chain_settings.getWrappedSystemToken();
+                const stkToken = chain_settings.getStakedSystemToken();
 
                 // get the price for both system and wrapped tokens
                 const price = (await chain_settings.getUsdPrice()).toString();
@@ -189,6 +191,27 @@ export const useBalancesStore = defineStore(store_name, {
                 sysToken.market = new TokenMarketData(marketInfo);
                 wrpToken.market = new TokenMarketData(marketInfo);
 
+                // Now we preview a deposit of 1 SYS to get the ratio
+                const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
+
+                const ratio:BigNumber = await chain.getStakedRatio(label);
+                const ratioNumber = ethers.utils.formatUnits(ratio, stkToken.decimals);
+
+                // only if the ratio is not zero, we update the STK token price
+                if (!ratio.isZero() && !ratio.isNegative()) {
+
+                    // Now we calculate the price of 1 STK = (price of 1 SYS) / ratio
+                    const stkPrice = convertCurrency(oneSys, sysToken.decimals, stkToken.decimals, ratioNumber);
+                    const stkPriceNumber = ethers.utils.formatUnits(stkPrice, sysToken.decimals);
+
+                    // Finally we update the STK token price
+                    const stkMarketInfo = { price:stkPriceNumber } as MarketSourceInfo;
+                    // TODO: this is removed until we decide what to do whith the STK token price
+                    // https://github.com/telosnetwork/telos-wallet/issues/544
+                    // stkToken.market = new TokenMarketData(stkMarketInfo);
+                    this.trace('updateSystemTokensPrices', `STLOS price: ${toRaw(stkMarketInfo)}`);
+                }
+
             } catch (error) {
                 console.error(error);
                 // we won't thorw an error here, as it is not critical
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 9acd20397..0b2ae6545 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -195,7 +195,7 @@ export const useChainStore = defineStore(store_name, {
             // Now we preview a deposit of 1 SYS to get the ratio
             const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
             const stakedRatio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
-            const unstakedRatio:ethers.BigNumber = await contractInstance.previewWithdraw(oneSys);
+            const unstakedRatio:ethers.BigNumber = await contractInstance.previewRedeem(oneSys);
 
             // Finally we update the store
             this.setStakedRatio(label, stakedRatio);
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index ba57fa046..e1cafff7b 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 6d2d5bd62..97b34369d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -26,16 +26,12 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
-const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
-const stakedRatio = computed(() => chainStore.getStakedRatio(label));
-const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
+const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
+const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
-    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
-        console.log('stakedRatio', stakedRatio.value.toString());
-        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
-        console.log('inverseRatio', inverseRatio.toString());
-        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
-        console.log('ratioNumber', ratioNumber);
+    if (stakedTokenBalanceBn.value && !unstakedRatio.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(unstakedRatio.value, stakedToken.decimals);
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -201,9 +197,6 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
-    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
-    <div>{{ stakedRatio?.toString() }}</div>
-
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 56a52195456ab987e49e99d67d6b64b0d1940556 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 106/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index e1cafff7b..ba57fa046 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },

From fa67286b07b95b7dcffc776de97ccc375cb05509 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 23 Aug 2023 14:01:24 -0300
Subject: [PATCH 107/268] saving WIP

---
 src/pages/evm/staking/StakingPageHeader.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 97b34369d..ef43bcd68 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -26,12 +26,25 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
+<<<<<<< HEAD
 const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
     if (stakedTokenBalanceBn.value && !unstakedRatio.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(unstakedRatio.value, stakedToken.decimals);
+=======
+const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
+const stakedExpressedInSystemBalanceBn = computed(() => {
+    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
+        console.log('stakedRatio', stakedRatio.value.toString());
+        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
+        console.log('inverseRatio', inverseRatio.toString());
+        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
+        console.log('ratioNumber', ratioNumber);
+>>>>>>> 8c4d4930 (saving WIP)
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -197,6 +210,9 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
+    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
+    <div>{{ stakedRatio?.toString() }}</div>
+
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 31c6f9b7ddf9a857b990f409977ea943cdf6390b Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 24 Aug 2023 20:00:04 -0300
Subject: [PATCH 108/268] Fetching real Rex data for the staking page header

---
 src/pages/evm/staking/StakingPageHeader.vue | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index ef43bcd68..b3ae8c745 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -26,25 +26,12 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
-<<<<<<< HEAD
 const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
     if (stakedTokenBalanceBn.value && !unstakedRatio.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(unstakedRatio.value, stakedToken.decimals);
-=======
-const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
-const stakedRatio = computed(() => chainStore.getStakedRatio(label));
-const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
-const stakedExpressedInSystemBalanceBn = computed(() => {
-    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
-        console.log('stakedRatio', stakedRatio.value.toString());
-        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
-        console.log('inverseRatio', inverseRatio.toString());
-        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
-        console.log('ratioNumber', ratioNumber);
->>>>>>> 8c4d4930 (saving WIP)
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;

From 28f2f6029824e9e2fb35339fd098ea0456e8f762 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 01:03:55 -0300
Subject: [PATCH 109/268] avoiding infinite loading

---
 src/pages/evm/staking/StakingPageHeader.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index b3ae8c745..d50334e40 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -46,8 +46,6 @@ const stakedFiatValueBn = computed(() => {
         return undefined;
     }
 });
-
-// watch the balances store to update the staked token balance and the system token price
 watch(() => balancesStore.getBalances(label), (balances) => {
     const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
     if (stakedTokenBalance) {

From 5bafff7c26c108ca428b3e5ae8784548f0567ebb Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 21:45:15 -0300
Subject: [PATCH 110/268] rebase source branch

---
 src/pages/evm/staking/StakingPageHeader.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index d50334e40..fa961e52f 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -195,9 +195,6 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
-    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
-    <div>{{ stakedRatio?.toString() }}</div>
-
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 466a94a91d1432d4cd508c77863056f1ffc8135c Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 22:03:46 -0300
Subject: [PATCH 111/268] avoiding infinite loading by forcing updates

---
 src/antelope/stores/balances.ts             |  7 +++
 src/antelope/stores/rex.ts                  | 11 ++++
 src/pages/evm/staking/StakingPageHeader.vue | 63 ++++++++++++++++++---
 3 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 33c37b4eb..f634b61c2 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -87,6 +87,13 @@ export const useBalancesStore = defineStore(store_name, {
                 await useBalancesStore().updateBalancesForAccount(CURRENT_CONTEXT, useAccountStore().loggedAccount);
             }, 10000);
         },
+        async updateBalances(label: string) {
+            this.trace('updateBalances', label);
+            const account = useAccountStore().getAccount(label);
+            if (account) {
+                await this.updateBalancesForAccount(label, account);
+            }
+        },
         async updateBalancesForAccount(label: string, account: AccountModel | null) {
             this.trace('updateBalancesForAccount', label, account);
             try {
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index f154ed6fd..20964d5ff 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -118,6 +118,17 @@ export const useRexStore = defineStore(store_name, {
             const totalStaking = await contract.totalAssets();
             this.setTotalStaking(label, totalStaking);
         },
+        /**
+         * This method should be called to update the REX data for a given context.
+         * @param label identifies the context (account and network) for the data
+         */
+        async updateRexData(label: string) {
+            this.trace('updateRexData', label);
+            const account = useAccountStore().getAccount(label);
+            if (account) {
+                await this.updateRexDataForAccount(label, account);
+            }
+        },
         /**
          * This method shopuld be called to quiery the REX data for a given account,
          * along with the current stato of the total staked tokens on the system.
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index fa961e52f..b0599c550 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
 import { useUserStore, useBalancesStore, useChainStore, useRexStore } from 'src/antelope';
 import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
-import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
-import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 
 const label = 'current';
 const { t: $t } = useI18n();
@@ -26,7 +28,6 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
-const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
@@ -37,7 +38,6 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = ref(undefined as BigNumber | undefined);
 const stakedFiatValueBn = computed(() => {
     if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
@@ -46,18 +46,27 @@ const stakedFiatValueBn = computed(() => {
         return undefined;
     }
 });
-watch(() => balancesStore.getBalances(label), (balances) => {
+const stakedTokenBalanceBn = computed(() => {
+    const balances = balancesStore.getBalances(label);
     const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
     if (stakedTokenBalance) {
-        stakedTokenBalanceBn.value = stakedTokenBalance;
+        return stakedTokenBalance;
+    } else {
+        return undefined;
     }
+});
+const systemTokenPrice = computed(() => {
+    const balances = balancesStore.getBalances(label);
     const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
     if (systemTokenPriceBalance) {
-        systemTokenPrice.value = systemTokenPriceBalance;
+        return systemTokenPriceBalance;
+    } else {
+        return undefined;
     }
 });
 
 
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);
@@ -171,6 +180,44 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
+// creatmos un interval que cada 5 segundos verifique si cada uno de los loadings es true o false.
+// por cada loading que encontremos en true, debemos llamar a actualizar las dependendicas de ese loading
+// si todos los loadings son false, entonces podemos parar el intervalo
+
+const intervalTimer = setInterval(() => {
+
+    // is staking still loading?
+    if (isStakedLoading.value) {
+        // if staked balance is still undefined we force the balances update
+        if (stakedTokenBalanceBn.value === undefined) {
+            balancesStore.updateBalances(label);
+        }
+        // if unstaked ratio is still zero we force the chain update
+        if (unstakedRatio.value.isZero()) {
+            chainStore.updateStakedRatio(label);
+        }
+    }
+    // is unstaking still loading?
+    if (isUnstakingLoading.value || isWithdrawableLoading.value) {
+        // we need to update rex data
+        useRexStore().updateRexData(label);
+    }
+    if (apyisLoading.value) {
+        // force apy update
+        chainStore.updateApy(label);
+    }
+
+    if (
+        // we are not in the staking page or...
+        route.path !== '/evm/staking' ||
+        // all loadings are false at the same time
+        (!isStakedLoading.value && !isUnstakingLoading.value && !isWithdrawableLoading.value && !apyisLoading.value)
+    ) {
+        clearInterval(intervalTimer);
+    } else {
+    }
+}, 5000);
+
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
     let decimals = symbol === fiatCurrency.value ? 2 : 4;
     if (!amount || amount.isZero()) {

From fbe427d44412edce7fbbaef7000f8217ea661759 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 23 Aug 2023 14:01:24 -0300
Subject: [PATCH 112/268] saving WIP

---
 src/pages/evm/staking/StakingPageHeader.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index b0599c550..a4b8f6541 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -237,11 +237,6 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 
 <template>
 <div class="c-staking-header">
-    <div class="text-center q-mb-xl">
-        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
-        <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
-    </div>
-
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 0f16e22b3c6b700c1607a32c8518272f094df802 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 11:25:05 -0300
Subject: [PATCH 113/268] addressing Erza's feedback

---
 src/antelope/stores/rex.ts                  |  3 +++
 src/pages/evm/staking/StakingPageHeader.vue | 13 +++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 20964d5ff..61f64f066 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -119,6 +119,7 @@ export const useRexStore = defineStore(store_name, {
             this.setTotalStaking(label, totalStaking);
         },
         /**
+<<<<<<< HEAD
          * This method should be called to update the REX data for a given context.
          * @param label identifies the context (account and network) for the data
          */
@@ -130,6 +131,8 @@ export const useRexStore = defineStore(store_name, {
             }
         },
         /**
+=======
+>>>>>>> f90833ad (addressing Erza's feedback)
          * This method shopuld be called to quiery the REX data for a given account,
          * along with the current stato of the total staked tokens on the system.
          * @param label identifies the context (network on this case) for the data
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index a4b8f6541..59d7f8124 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -67,6 +67,19 @@ const systemTokenPrice = computed(() => {
 
 
 
+// watch the balances store to update the staked token balance and the system token price
+watch(() => balancesStore.getBalances(label), (balances) => {
+    const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
+    if (stakedTokenBalance) {
+        stakedTokenBalanceBn.value = stakedTokenBalance;
+    }
+    const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
+    if (systemTokenPriceBalance) {
+        systemTokenPrice.value = systemTokenPriceBalance;
+    }
+});
+
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);

From 26440ef228c70557d3a6370971cabae0bcbd7743 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 14:07:23 -0300
Subject: [PATCH 114/268] rebasing with source branch

---
 src/antelope/stores/rex.ts                  |  3 ---
 src/i18n/en-us/index.js                     |  6 ++----
 src/pages/evm/staking/StakingPageHeader.vue | 14 --------------
 3 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 61f64f066..20964d5ff 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -119,7 +119,6 @@ export const useRexStore = defineStore(store_name, {
             this.setTotalStaking(label, totalStaking);
         },
         /**
-<<<<<<< HEAD
          * This method should be called to update the REX data for a given context.
          * @param label identifies the context (account and network) for the data
          */
@@ -131,8 +130,6 @@ export const useRexStore = defineStore(store_name, {
             }
         },
         /**
-=======
->>>>>>> f90833ad (addressing Erza's feedback)
          * This method shopuld be called to quiery the REX data for a given account,
          * along with the current stato of the total staked tokens on the system.
          * @param label identifies the context (network on this case) for the data
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index ba57fa046..e1cafff7b 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 59d7f8124..a0ea81525 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -66,20 +66,6 @@ const systemTokenPrice = computed(() => {
 });
 
 
-
-// watch the balances store to update the staked token balance and the system token price
-watch(() => balancesStore.getBalances(label), (balances) => {
-    const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
-    if (stakedTokenBalance) {
-        stakedTokenBalanceBn.value = stakedTokenBalance;
-    }
-    const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
-    if (systemTokenPriceBalance) {
-        systemTokenPrice.value = systemTokenPriceBalance;
-    }
-});
-
-
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);

From a3fcdde60ce26c43fe011718c024e4737be665de Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 115/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index e1cafff7b..ba57fa046 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },

From ee745bccd6de8626dfa313722b959fdd9abad5d8 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 116/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index ba57fa046..e1cafff7b 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },

From dd5457fd1cedd249acc44f49507d48e9da5149ec Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Mon, 4 Sep 2023 03:56:20 -0500
Subject: [PATCH 117/268] fix: card width

---
 src/components/evm/ScrollableInfoCards.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index d05e600b5..5635d052f 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -99,7 +99,7 @@ const props = defineProps<{
         @include sm-and-up {
             width: 300px;
             &--small {
-                width: 220px;
+                width: 250px;
             }
         }
     }

From 95e4f24454bbfd1b5708c0588e0f0410c5878a9e Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 10:19:53 -0300
Subject: [PATCH 118/268] addressing feedback

---
 src/antelope/chains/EVMChainSettings.ts     |  4 ++++
 src/i18n/en-us/index.js                     |  4 ++++
 src/pages/evm/staking/StakingPageHeader.vue | 15 +++++++++++++++
 3 files changed, 23 insertions(+)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 504cc0ca7..86c6b57ce 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -392,7 +392,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      * @param contract contract instance to be cached
      */
+<<<<<<< HEAD
     addContract(address: string, contract: EvmContract | false) {
+=======
+    addContract(address: string, contract: EvmContract) {
+>>>>>>> 958b7ab3 (addressing feedback)
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
             this.contracts[key] = {
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index e1cafff7b..d4c890569 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -202,7 +202,11 @@ export default {
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
         withdrawable_card_label: 'withdrawable',
+<<<<<<< HEAD
         withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
+=======
+        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
+>>>>>>> 958b7ab3 (addressing feedback)
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index a0ea81525..df8c443b3 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -125,6 +125,10 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
+<<<<<<< HEAD
+=======
+// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
+>>>>>>> 958b7ab3 (addressing feedback)
 const totalFiatValueBn = computed(() => {
     const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
     const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
@@ -179,6 +183,7 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
+<<<<<<< HEAD
 // creatmos un interval que cada 5 segundos verifique si cada uno de los loadings es true o false.
 // por cada loading que encontremos en true, debemos llamar a actualizar las dependendicas de ese loading
 // si todos los loadings son false, entonces podemos parar el intervalo
@@ -217,6 +222,8 @@ const intervalTimer = setInterval(() => {
     }
 }, 5000);
 
+=======
+>>>>>>> 958b7ab3 (addressing feedback)
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
     let decimals = symbol === fiatCurrency.value ? 2 : 4;
     if (!amount || amount.isZero()) {
@@ -236,6 +243,14 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 
 <template>
 <div class="c-staking-header">
+<<<<<<< HEAD
+=======
+    <div class="text-center q-mb-xl">
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
+        <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
+    </div>
+
+>>>>>>> 958b7ab3 (addressing feedback)
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From c201be8336c97486e666199a2193b269c862f263 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 11:25:05 -0300
Subject: [PATCH 119/268] addressing Erza's feedback

---
 src/antelope/chains/EVMChainSettings.ts     |  4 ----
 src/pages/evm/staking/StakingPageHeader.vue | 15 ---------------
 2 files changed, 19 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 86c6b57ce..504cc0ca7 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -392,11 +392,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      * @param contract contract instance to be cached
      */
-<<<<<<< HEAD
     addContract(address: string, contract: EvmContract | false) {
-=======
-    addContract(address: string, contract: EvmContract) {
->>>>>>> 958b7ab3 (addressing feedback)
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
             this.contracts[key] = {
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index df8c443b3..a0ea81525 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -125,10 +125,6 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
-<<<<<<< HEAD
-=======
-// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
->>>>>>> 958b7ab3 (addressing feedback)
 const totalFiatValueBn = computed(() => {
     const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
     const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
@@ -183,7 +179,6 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
-<<<<<<< HEAD
 // creatmos un interval que cada 5 segundos verifique si cada uno de los loadings es true o false.
 // por cada loading que encontremos en true, debemos llamar a actualizar las dependendicas de ese loading
 // si todos los loadings son false, entonces podemos parar el intervalo
@@ -222,8 +217,6 @@ const intervalTimer = setInterval(() => {
     }
 }, 5000);
 
-=======
->>>>>>> 958b7ab3 (addressing feedback)
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
     let decimals = symbol === fiatCurrency.value ? 2 : 4;
     if (!amount || amount.isZero()) {
@@ -243,14 +236,6 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 
 <template>
 <div class="c-staking-header">
-<<<<<<< HEAD
-=======
-    <div class="text-center q-mb-xl">
-        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
-        <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
-    </div>
-
->>>>>>> 958b7ab3 (addressing feedback)
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 659dd3153e2043406ab7d95b2ea6be26190d59d5 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 19:38:17 -0300
Subject: [PATCH 120/268] save WIP - staking tab

---
 src/antelope/stores/rex.ts                  |  13 +-
 src/components/ConversionRateBadge.vue      |   7 +-
 src/components/evm/inputs/CurrencyInput.vue |  14 +-
 src/i18n/en-us/index.js                     |   9 +
 src/pages/evm/staking/StakingPage.vue       |   3 +-
 src/pages/evm/staking/StakingPageHeader.vue |   1 +
 src/pages/evm/staking/StakingTab.vue        | 264 ++++++++++++++++++++
 src/pages/evm/wrap/UnwrapTab.vue            |   1 +
 src/pages/evm/wrap/WrapTab.vue              |   1 +
 9 files changed, 302 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/evm/staking/StakingTab.vue

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 20964d5ff..39dbb148a 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -13,7 +13,7 @@ import {
     createTraceFunction,
     useFeedbackStore,
 } from 'src/antelope/stores/feedback';
-import { AntelopeError, Label } from 'src/antelope/types';
+import { AntelopeError, Label, TransactionResponse } from 'src/antelope/types';
 import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
 import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
@@ -187,9 +187,20 @@ export const useRexStore = defineStore(store_name, {
             const balance = await contract.balanceOf(address);
             this.setBalance(label, balance);
         },
+        /**
+         * utility method to get the number of decimals for the staked system token
+         * @returns the number of decimals for the staked system token
+         */
         getStakingDecimals() {
             return useChainStore().currentEvmChain?.settings.getStakedSystemToken().decimals || WEI_PRECISION;
         },
+        // transactions ----------
+        async stakeSystemTokens(label: string, amount: ethers.BigNumber): Promise<TransactionResponse> {
+            // TODO: implement
+            console.error('stakeSystemTokens not implemented yet');
+            this.trace('stakeSystemTokens', label, amount);
+            return {} as TransactionResponse;
+        },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
             const num = parseFloat(ethers.utils.formatUnits(withdrawable, this.getStakingDecimals()));
diff --git a/src/components/ConversionRateBadge.vue b/src/components/ConversionRateBadge.vue
index 4b35ef743..b74f4fc75 100644
--- a/src/components/ConversionRateBadge.vue
+++ b/src/components/ConversionRateBadge.vue
@@ -11,17 +11,20 @@ const props = defineProps<{
     tokenTwoSymbol: string;
     tokenTwoAmount: BigNumber; // the amount of token two in a single token one
     tokenTwoDecimals: number; // the number of decimals in token two, e.g. 18 for ETH
+    decimals: number; // abbreviate should be false in order to display decimals
 }>();
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
 
 const label = computed(() => {
+    console.log('label computed: ', props.tokenOneSymbol, props.tokenTwoSymbol, props.tokenTwoAmount.toString(), fiatLocale.value, props.tokenTwoDecimals);
+    const abbreviate = props.decimals === 0;
     const prettyTokenTwoAmount = prettyPrintCurrency(
         props.tokenTwoAmount,
-        4,
+        props.decimals ?? 2,
         fiatLocale.value,
-        true,
+        abbreviate,
         props.tokenTwoSymbol,
         false,
         props.tokenTwoDecimals,
diff --git a/src/components/evm/inputs/CurrencyInput.vue b/src/components/evm/inputs/CurrencyInput.vue
index 793c57f81..bb8e82b80 100644
--- a/src/components/evm/inputs/CurrencyInput.vue
+++ b/src/components/evm/inputs/CurrencyInput.vue
@@ -328,12 +328,12 @@ export default defineComponent({
         },
 
         primaryCurrencyDisplayPrecision() {
-            // if the value represents fiat, show 2 decimals; else show 4
-            return this.decimals === 2 ? 2 : 4;
+            // if the value represents fiat, show 2 decimals; else show this.decimalsToDisplay
+            return this.decimals === 2 ? 2 : this.decimalsToDisplay;
         },
         secondaryCurrencyDisplayPrecision() {
-            // if the value represents fiat, show 2 decimals; else show 4
-            return this.secondaryCurrencyDecimals === 2 ? 2 : 4;
+            // if the value represents fiat, show 2 decimals; else show this.decimalsToDisplay
+            return this.secondaryCurrencyDecimals === 2 ? 2 : this.decimalsToDisplay;
         },
         leadingZeroesRegex(): RegExp {
             const leadingZeroesPattern = `^0+(?!$|\\${this.decimalSeparator})`;
@@ -427,7 +427,7 @@ export default defineComponent({
                             true,
                         );
                     } else {
-                        const decimalsToShow = formatUnits(newValue, this.decimals).split('.')[1].length;
+                        const decimalsToShow = this.decimalsToDisplay;
                         newInputValue = prettyPrintCurrency(
                             newValue,
                             decimalsToShow,
@@ -937,9 +937,9 @@ export default defineComponent({
 
 <template>
 <div
-    :id="$attrs.id"
+    :id="($attrs.id as string)"
     :class="{
-        [$attrs.class]: !!$attrs.class,
+        [$attrs.class as string]: !!$attrs.class,
         'c-currency-input': true,
         'c-currency-input--error': !!visibleErrorText,
         'c-currency-input--readonly': !!inputElementAttrs.readonly,
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index d4c890569..fd942dfdb 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -223,6 +223,15 @@ export default {
         tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
+        stake_input_label: 'Staking Amount',
+        stake: 'Stake',
+        stake_button_label: 'Stake {systemSymbol} to {stakedSymbol}',
+        stake_sidebar_title: 'Why stake {symbol}?',
+        stake_sidebar_content_fragment_1: 'Staking your TLOS to sTLOS grants you access to',
+        stake_sidebar_content_fragment_2_bold: ' continuous rewards ',
+        stake_sidebar_content_fragment_3: 'and various DeFi applications, further increasing yield. As the reward pool increases, the TLOS to sTLOS conversion rate will change over time. Therefore, the amount of sTLOS received is smaller than the staked TLOS.',
+        stake_sidebar_content_fragment_4_bold: ' Rewards will be auto-compounded. ',
+        stake_sidebar_content_fragment_5: 'No further action is required.',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index e5ac5b327..374dd8eef 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AppPage from 'components/evm/AppPage.vue';
 import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
+import StakingTab from 'pages/evm/staking/StakingTab.vue';
 
 const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
@@ -12,7 +13,7 @@ const tabs = ['stake', 'unstake', 'withdraw'];
     </template>
 
     <template v-slot:stake>
-        <p>stake tab</p>
+        <StakingTab />
     </template>
 
     <template v-slot:unstake>
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index a0ea81525..a4b8f6541 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -66,6 +66,7 @@ const systemTokenPrice = computed(() => {
 });
 
 
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
new file mode 100644
index 000000000..c37bce9e0
--- /dev/null
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ethers } from 'ethers';
+
+import {
+    getAntelope,
+    useAccountStore,
+    useBalancesStore,
+    useChainStore,
+    useRexStore,
+    useUserStore,
+} from 'src/antelope';
+
+import EVMSidebarPage from 'src/layouts/EVMSidebarPage.vue';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
+import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { AntelopeError } from 'src/antelope/types';
+
+const label = 'current';
+
+const { t: $t } = useI18n();
+const uiDecimals = 2;
+const ant = getAntelope();
+const chainStore = useChainStore();
+const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
+const userStore = useUserStore();
+const balanceStore = useBalancesStore();
+const accountStore = useAccountStore();
+
+const systemToken = chainSettings.getSystemToken();
+const systemTokenSymbol = systemToken.symbol;
+const systemTokenDecimals = systemToken.decimals;
+const stakedToken = chainSettings.getStakedSystemToken();
+const stakedTokenSymbol = stakedToken.symbol;
+const stakedTokenDecimals = stakedToken.decimals;
+
+
+// data
+const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
+const inputModelValue = ref(ethers.constants.Zero);
+const estimatedGas = ref(ethers.constants.Zero);
+const stakedRatio = computed(() => {
+    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
+    return chainStore.getStakedRatio(label);
+});
+const outputModelValue = computed(() => {
+    if (stakedRatio.value.isZero()) {
+        return ethers.constants.Zero;
+    }
+    const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
+    console.log('outputModelValue computed: ', output.toString());
+    return output;
+});
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
+    balance => balance.token.contract === systemToken.address)[0],
+);
+const systemTokenFiatPrice = computed(() => systemTokenBalanceInfo.value?.token.price.getAmountInFiatStr(1) ?? '1');
+const systemTokenBalance = computed(() => systemTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
+const sidebarContent = computed(() => {
+    const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
+    const content = [{
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_1',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_2_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_3',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_4_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_5',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }];
+
+    return {
+        header,
+        content,
+    };
+});
+const availableTostake = computed(() => {
+    const available = systemTokenBalance.value.sub(estimatedGas.value);
+
+    if (available.lt(0)) {
+        return ethers.constants.Zero;
+    }
+    return available;
+});
+const formIsValid = computed(() =>
+    !inputModelValue.value.isZero() &&
+    inputModelValue.value.lt(availableTostake.value),
+);
+const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeSystemTokens'));
+
+
+// methods
+onBeforeMount(() => {
+    // https://github.com/telosnetwork/telos-wallet/issues/274
+    const GAS_FOR_stakePING_TOKEN = 55500;
+    chainSettings.getEstimatedGas(GAS_FOR_stakePING_TOKEN).then((gas) => {
+        estimatedGas.value = gas.system;
+    });
+});
+
+async function handleCtaClick() {
+    const label = 'logged';
+    if (!await accountStore.isConnectedToCorrectNetwork(label)) {
+        const networkName = useChainStore().loggedChain.settings.getDisplay();
+        const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
+
+        ant.config.notifyFailureWithAction(errorMessage, {
+            label: ant.config.localizationHandler('evm_wallet.switch'),
+        });
+
+        return;
+    }
+
+    if (formIsValid.value) {
+        try {
+            const tx = await useRexStore().stakeSystemTokens(label, inputModelValue.value);
+            const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
+
+            const dismiss = ant.config.notifyNeutralMessageHandler(
+                $t('notification.neutral_message_stakeping', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+            );
+
+            tx.wait().then(() => {
+                ant.config.notifySuccessfulTrxHandler(
+                    `${chainSettings.getExplorerUrl()}/tx/${tx.hash}`,
+                );
+            }).catch((err) => {
+                console.error(err);
+            }).finally(() => {
+                dismiss();
+            });
+        } catch (err) {
+            console.error(err);
+            if (err instanceof AntelopeError) {
+                const evmErr = err as AntelopeError;
+                ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
+            } else {
+                ant.config.notifyFailureMessage($t('evm_wallet.general_error'));
+            }
+        }
+    }
+}
+</script>
+
+<template>
+<EVMSidebarPage :sidebar-content="sidebarContent">
+
+    <!-- convert ratio 1:stakedRatio -->
+    <div class="row q-mb-xl">
+        <div class="col-12">
+            <div class="c-stake-tab__badge-container">
+                <ConversionRateBadge
+                    :token-one-symbol="systemTokenSymbol"
+                    :token-two-symbol="stakedTokenSymbol"
+                    :token-two-decimals="systemTokenDecimals"
+                    :token-two-amount="stakedRatio"
+                    :decimals="uiDecimals"
+                />
+            </div>
+        </div>
+    </div>
+
+    <!-- TLOS input -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="inputModelValue"
+                :symbol="systemTokenSymbol"
+                :decimals="systemTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :secondary-currency-code="fiatCurrency"
+                :secondary-currency-decimals="2"
+                :secondary-currency-conversion-factor="systemTokenFiatPrice"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                :max-value="availableTostake"
+                class="c-stake-tab__input"
+            />
+        </div>
+    </div>
+
+    <!-- arrow -->
+    <div class="row q-mb-sm">
+        <div class="col-12 text-center">
+            <img
+                src="~assets/icon--arrow-down.svg"
+                :alt="$t('global.arrow_icon_alt')"
+                height="20"
+                width="18"
+            >
+        </div>
+    </div>
+
+    <!-- output field (readonly) -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="outputModelValue"
+                :symbol="stakedTokenSymbol"
+                :decimals="stakedTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                class="c-stake-tab__input"
+                readonly="readonly"
+            />
+        </div>
+    </div>
+
+    <!-- stake button -->
+    <div class="row">
+        <div class="col-12">
+            <div class="c-stake-tab__cta-container">
+                <q-btn
+                    color="primary"
+                    :disable="!formIsValid"
+                    :loading="ctaIsLoading"
+                    :label="$t('evm_stake.stake')"
+                    :aria-label="$t(
+                        'evm_stake.stake_button_label',
+                        { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+                    )"
+                    @click="handleCtaClick"
+                />
+            </div>
+        </div>
+    </div>
+</EVMSidebarPage>
+</template>
+
+<style lang="scss">
+.c-stake-tab {
+    &__badge-container,
+    &__cta-container,
+    &__input {
+        max-width: 320px;
+        margin: auto;
+    }
+
+    &__badge-container,
+    &__cta-container {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+</style>
diff --git a/src/pages/evm/wrap/UnwrapTab.vue b/src/pages/evm/wrap/UnwrapTab.vue
index 1f04ab8dd..05659e389 100644
--- a/src/pages/evm/wrap/UnwrapTab.vue
+++ b/src/pages/evm/wrap/UnwrapTab.vue
@@ -124,6 +124,7 @@ async function handleUnwrapClick() {
                     :token-two-symbol="systemTokenSymbol"
                     :token-two-decimals="systemTokenDecimals"
                     :token-two-amount="oneEth"
+                    :decimals="0"
                 />
             </div>
         </div>
diff --git a/src/pages/evm/wrap/WrapTab.vue b/src/pages/evm/wrap/WrapTab.vue
index bd888f44e..0ae81b2a0 100644
--- a/src/pages/evm/wrap/WrapTab.vue
+++ b/src/pages/evm/wrap/WrapTab.vue
@@ -141,6 +141,7 @@ async function handleCtaClick() {
                     :token-two-symbol="systemTokenSymbol"
                     :token-two-decimals="systemTokenDecimals"
                     :token-two-amount="oneEth"
+                    :decimals="0"
                 />
             </div>
         </div>

From b2316eb4353d9454ae3eb4c5f4e66bb9b9d3a6c9 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sun, 3 Sep 2023 13:53:59 -0300
Subject: [PATCH 121/268] Staking tab fully functional

---
 src/antelope/stores/balances.ts               |   1 +
 src/antelope/stores/rex.ts                    |  55 +++-
 src/antelope/stores/utils/trx-utils.ts        |  29 ++
 .../authenticators/EVMAuthenticator.ts        |   3 +
 .../authenticators/InjectedProviderAuth.ts    |  38 ++-
 .../wallets/authenticators/OreIdAuth.ts       |  13 +
 .../authenticators/WalletConnectAuth.ts       |  12 +
 src/components/evm/inputs/CurrencyInput.vue   |   9 +-
 src/i18n/en-us/index.js                       |   6 +-
 src/pages/evm/staking/StakingTab.vue          |  13 +-
 src/pages/evm/staking/UnstakingTab.vue        | 258 ++++++++++++++++++
 test/jest/utils/antelope/index.ts             |   1 +
 test/jest/utils/antelope/mockData.ts          |   2 +
 test/jest/utils/antelope/store-chain.ts       |   4 +
 test/jest/utils/antelope/store-utils.ts       |  12 +
 15 files changed, 433 insertions(+), 23 deletions(-)
 create mode 100644 src/antelope/stores/utils/trx-utils.ts
 create mode 100644 src/pages/evm/staking/UnstakingTab.vue
 create mode 100644 test/jest/utils/antelope/store-utils.ts

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index f634b61c2..f36f60c97 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -52,6 +52,7 @@ import { AccountModel, EvmAccountModel } from 'src/antelope/stores/account';
 import { EVMAuthenticator } from 'src/antelope/wallets';
 import { filter } from 'rxjs';
 import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { subscribeForTransactionReceipt } from 'src/antelope/stores/utils/trx-utils';
 
 export interface BalancesState {
     __balances:  { [label: Label]: TokenBalance[] };
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 39dbb148a..aa686e116 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -16,10 +16,10 @@ import {
 import { AntelopeError, Label, TransactionResponse } from 'src/antelope/types';
 import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
-import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
+import { getAntelope, useBalancesStore, useChainStore, useEVMStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION } from 'src/antelope/stores/utils';
-
+import { subscribeForTransactionReceipt } from 'src/antelope/stores/utils/trx-utils';
 
 
 export interface EvmRexDeposit {
@@ -85,7 +85,7 @@ export const useRexStore = defineStore(store_name, {
             const contract = await useEVMStore().getContract(authenticator, address);
             if (!contract) {
                 this.trace('getStakedSystemContractInstance', label, '-> no contract');
-                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+                throw new AntelopeError('antelope.rex.error_contract_not_found', { address });
             }
             const contractInstance = await contract.getContractInstance();
             return contractInstance;
@@ -188,18 +188,55 @@ export const useRexStore = defineStore(store_name, {
             this.setBalance(label, balance);
         },
         /**
-         * utility method to get the number of decimals for the staked system token
+         * utility function to get the number of decimals for the staked system token
          * @returns the number of decimals for the staked system token
          */
         getStakingDecimals() {
             return useChainStore().currentEvmChain?.settings.getStakedSystemToken().decimals || WEI_PRECISION;
         },
         // transactions ----------
-        async stakeSystemTokens(label: string, amount: ethers.BigNumber): Promise<TransactionResponse> {
-            // TODO: implement
-            console.error('stakeSystemTokens not implemented yet');
-            this.trace('stakeSystemTokens', label, amount);
-            return {} as TransactionResponse;
+        /**
+         * This methos sould be called by any transaction performed by this store. It subscribes to the transaction
+         * receipt and updates the balance and rex status for the account if the transaction is successful.
+         * @param account account performing the transaction
+         * @param response the transaction response holding the hash
+         * @returns the same transaction response but modified by the utility function subscribeForTransactionReceipt
+         */
+        async subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<TransactionResponse> {
+            this.trace('subscribeForTransactionReceipt', account.account, response.hash);
+            subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
+                this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
+                if (receipt.status === 1) {
+                    this.updateRexDataForAccount('logged', account);
+                    useBalancesStore().updateBalancesForAccount('logged', account);
+                }
+                return receipt;
+            });
+            return response;
+        },
+        /**
+         * Performs the staking of System Tokens for a giuven account on the REX system of a given network.
+         * @param label identifies the context (account-network) for the data
+         * @param amount the amount of tokens to stake
+         * @returns the transaction response holding the hash and a wait method to subscribe to the transaction receipt
+         */
+        async stakeEVMSystemTokens(label: string, amount: ethers.BigNumber): Promise<TransactionResponse> {
+            const funcname = 'stakeEVMSystemTokens';
+            this.trace(funcname, label, amount.toString());
+
+            try {
+                useFeedbackStore().setLoading(funcname);
+                const account = useAccountStore().getAccount(label);
+                const authenticator = useAccountStore().getEVMAuthenticator(label);
+                return await authenticator.stakeSystemTokens(amount)
+                    .then(r => this.subscribeForTransactionReceipt(account, r as TransactionResponse));
+            } catch (error) {
+                const trxError = getAntelope().config.wrapError('antelope.evm.error_wrap_failed', error);
+                getAntelope().config.transactionErrorHandler(trxError, funcname);
+                throw trxError;
+            } finally {
+                useFeedbackStore().unsetLoading(funcname);
+            }
         },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
diff --git a/src/antelope/stores/utils/trx-utils.ts b/src/antelope/stores/utils/trx-utils.ts
new file mode 100644
index 000000000..9d7305fa0
--- /dev/null
+++ b/src/antelope/stores/utils/trx-utils.ts
@@ -0,0 +1,29 @@
+import { usePlatformStore } from 'src/antelope';
+import { ethers } from 'ethers';
+import { AccountModel } from 'src/antelope/stores/account';
+import { AntelopeError, TransactionResponse } from 'src/antelope/types';
+import { EVMAuthenticator } from 'src/antelope/wallets';
+
+
+export async function subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<ethers.providers.TransactionReceipt> {
+    if (account.isNative) {
+        throw new AntelopeError('Not implemented yet for native');
+    } else {
+        const authenticator = account.authenticator as EVMAuthenticator;
+        const provider = await authenticator.web3Provider();
+        if (provider) {
+            const whenConfirmed = provider.waitForTransaction(response.hash);
+            // we add the wait method to the response,
+            // so that the caller can subscribe to the confirmation event
+            response.wait = async () => whenConfirmed;
+            return whenConfirmed;
+        } else {
+            if (usePlatformStore().isMobile) {
+                response.wait = async () => Promise.resolve({} as ethers.providers.TransactionReceipt);
+                return Promise.resolve({} as ethers.providers.TransactionReceipt);
+            } else {
+                throw new AntelopeError('antelope.evm.error_no_provider');
+            }
+        }
+    }
+}
diff --git a/src/antelope/wallets/authenticators/EVMAuthenticator.ts b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
index 9dca55135..b80989335 100644
--- a/src/antelope/wallets/authenticators/EVMAuthenticator.ts
+++ b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
@@ -10,6 +10,7 @@ import { usePlatformStore } from 'src/antelope/stores/platform';
 import { AntelopeError, EvmTransactionResponse, ExceptionError, TokenClass, addressString } from 'src/antelope/types';
 
 export abstract class EVMAuthenticator {
+
     readonly label: string;
     readonly trace: (message: string, ...args: unknown[]) => void;
 
@@ -27,6 +28,8 @@ export abstract class EVMAuthenticator {
     abstract prepareTokenForTransfer(token: TokenClass | null, amount: BigNumber, to: string): Promise<void>;
     abstract wrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
     abstract unwrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
+    abstract stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
+    abstract unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
     abstract isConnectedTo(chainId: string): Promise<boolean>;
     abstract externalProvider(): Promise<ethers.providers.ExternalProvider>;
     abstract web3Provider(): Promise<ethers.providers.Web3Provider>;
diff --git a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
index 8fb65a952..b9989004c 100644
--- a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
+++ b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
@@ -2,7 +2,7 @@
 
 import { BigNumber, ethers } from 'ethers';
 import { BehaviorSubject, filter, map } from 'rxjs';
-import { useChainStore, useEVMStore, useFeedbackStore } from 'src/antelope';
+import { useAccountStore, useChainStore, useEVMStore, useFeedbackStore } from 'src/antelope';
 import {
     AntelopeError,
     ERC20_TYPE,
@@ -250,6 +250,42 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
         });
     }
 
+    async stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
+        this.trace('stakeSystemTokens', amount.toString());
+
+        const chain = useChainStore().getChain(this.label);
+        const stakedToken = (chain.settings as EVMChainSettings).getStakedSystemToken();
+
+        const evm = useEVMStore();
+        const contract = await evm.getContract(this, stakedToken.address, stakedToken.type);
+        if (contract) {
+            const contractInstance = await contract.getContractInstance();
+            const transaction = (await contractInstance.depositTLOS({ value: amount })) as EvmTransactionResponse;
+            return transaction;
+        } else {
+            throw new AntelopeError('antelope.balances.error_token_contract_not_found', { address: stakedToken.address });
+        }
+    }
+
+    async unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
+        this.trace('unstakeSystemTokens', amount.toString());
+
+        const chain = useChainStore().getChain(this.label);
+        const stakedToken = (chain.settings as EVMChainSettings).getStakedSystemToken();
+
+        const evm = useEVMStore();
+        const contract = await evm.getContract(this, stakedToken.address, stakedToken.type);
+        if (contract) {
+            const contractInstance = await contract.getContractInstance();
+            const amountInWei = amount.toString();
+            const address = useAccountStore().getAccount(this.label).account;
+            return contractInstance.withdraw(amountInWei, address, address);
+        } else {
+            throw new AntelopeError('antelope.balances.error_token_contract_not_found', { address: stakedToken.address });
+        }
+    }
+
+
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
         return useEVMStore().isProviderOnTheCorrectChain(await this.web3Provider(), chainId);
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index 35c4d6ddf..49e01ab93 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -365,6 +365,19 @@ export class OreIdAuth extends EVMAuthenticator {
         } as EvmTransactionResponse;
     }
 
+    async stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
+        // TODO: implement
+        this.trace('stakeSystemTokens', amount.toString());
+        return Promise.resolve({} as EvmTransactionResponse);
+    }
+
+    async unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
+        // TODO: implement
+        this.trace('unstakeSystemTokens', amount.toString());
+        return Promise.resolve({} as EvmTransactionResponse);
+    }
+
+
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
         return true;
diff --git a/src/antelope/wallets/authenticators/WalletConnectAuth.ts b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
index fa2ce28e0..aa8a5981d 100644
--- a/src/antelope/wallets/authenticators/WalletConnectAuth.ts
+++ b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
@@ -353,6 +353,18 @@ export class WalletConnectAuth extends EVMAuthenticator {
         return await writeContract(sendConfig);
     }
 
+    async stakeSystemTokens(amount: BigNumber): Promise<WriteContractResult> {
+        // TODO: implement
+        this.trace('stakeSystemTokens', amount.toString());
+        return Promise.resolve({} as WriteContractResult);
+    }
+
+    async unstakeSystemTokens(amount: BigNumber): Promise<WriteContractResult> {
+        // TODO: implement
+        this.trace('unstakeSystemTokens', amount.toString());
+        return Promise.resolve({} as WriteContractResult);
+    }
+
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
 
diff --git a/src/components/evm/inputs/CurrencyInput.vue b/src/components/evm/inputs/CurrencyInput.vue
index bb8e82b80..6cbd0d1d8 100644
--- a/src/components/evm/inputs/CurrencyInput.vue
+++ b/src/components/evm/inputs/CurrencyInput.vue
@@ -931,15 +931,20 @@ export default defineComponent({
                 this.inputIsDirty = false;
             });
         },
+
+        // utility to convert to string properties attrs typed as never
+        asString(val: unknown): string {
+            return val as string;
+        },
     },
 });
 </script>
 
 <template>
 <div
-    :id="($attrs.id as string)"
+    :id="asString($attrs.id)"
     :class="{
-        [$attrs.class as string]: !!$attrs.class,
+        [asString($attrs.class)]: !!$attrs.class,
         'c-currency-input': true,
         'c-currency-input--error': !!visibleErrorText,
         'c-currency-input--readonly': !!inputElementAttrs.readonly,
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index fd942dfdb..6d0a4f4a5 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -247,7 +247,7 @@ export default {
         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}</b>',
+        neutral_message_staking: 'Staking <b>{quantity} {symbol}</b>',
         neutral_message_unstaking: 'Unstaking <b>{quantity}</b>',
         neutral_message_revoking: 'Revoking  <b>{symbol}</b> allowance for <b>{address}</b>',
         neutral_message_wrapping: 'Wrapping <b>{quantity} {symbol}</b>',
@@ -533,6 +533,7 @@ export default {
             error_apy: 'Error in getting APY',
             error_invalid_network: 'Invalid network',
             error_no_default_authenticator: 'No default authenticator found',
+            error_no_default_authenticator: 'No default authenticator found',
         },
         account: {
             error_login_native: 'An error has occurred trying to login to the native chain',
@@ -548,6 +549,9 @@ export default {
             error_at_transfer_tokens: 'An error has occurred trying to transfer tokens',
             error_token_contract_not_found: 'Token contract not found for address {address}',
         },
+        rex: {
+            error_contract_not_found: 'Contract not found for address {address}',
+        },
         wallets: {
             error_system_token_transfer_config: 'Error getting Wagmi system token transfer config',
             error_token_transfer_config: 'Error getting Wagmi token transfer config',
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index c37bce9e0..762cf3f90 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -17,7 +17,6 @@ import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
 import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
 import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
-import { AntelopeError } from 'src/antelope/types';
 
 const label = 'current';
 
@@ -104,7 +103,7 @@ const formIsValid = computed(() =>
     !inputModelValue.value.isZero() &&
     inputModelValue.value.lt(availableTostake.value),
 );
-const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeSystemTokens'));
+const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeEVMSystemTokens'));
 
 
 // methods
@@ -131,11 +130,11 @@ async function handleCtaClick() {
 
     if (formIsValid.value) {
         try {
-            const tx = await useRexStore().stakeSystemTokens(label, inputModelValue.value);
+            const tx = await useRexStore().stakeEVMSystemTokens(label, inputModelValue.value);
             const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
 
             const dismiss = ant.config.notifyNeutralMessageHandler(
-                $t('notification.neutral_message_stakeping', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+                $t('notification.neutral_message_staking', { quantity: formattedAmount, symbol: systemTokenSymbol }),
             );
 
             tx.wait().then(() => {
@@ -149,12 +148,6 @@ async function handleCtaClick() {
             });
         } catch (err) {
             console.error(err);
-            if (err instanceof AntelopeError) {
-                const evmErr = err as AntelopeError;
-                ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
-            } else {
-                ant.config.notifyFailureMessage($t('evm_wallet.general_error'));
-            }
         }
     }
 }
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
new file mode 100644
index 000000000..59185d0bb
--- /dev/null
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ethers } from 'ethers';
+
+import {
+    getAntelope,
+    useAccountStore,
+    useBalancesStore,
+    useChainStore,
+    useRexStore,
+    useUserStore,
+} from 'src/antelope';
+
+import EVMSidebarPage from 'src/layouts/EVMSidebarPage.vue';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
+import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { AntelopeError } from 'src/antelope/types';
+
+const label = 'current';
+
+const { t: $t } = useI18n();
+const uiDecimals = 2;
+const ant = getAntelope();
+const chainStore = useChainStore();
+const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
+const userStore = useUserStore();
+const balanceStore = useBalancesStore();
+const accountStore = useAccountStore();
+
+const systemToken = chainSettings.getSystemToken();
+const systemTokenSymbol = systemToken.symbol;
+const systemTokenDecimals = systemToken.decimals;
+const stakedToken = chainSettings.getStakedSystemToken();
+const stakedTokenSymbol = stakedToken.symbol;
+const stakedTokenDecimals = stakedToken.decimals;
+
+
+// data
+const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
+const inputModelValue = ref(ethers.constants.Zero);
+const estimatedGas = ref(ethers.constants.Zero);
+const stakedRatio = computed(() => {
+    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
+    return chainStore.getStakedRatio(label);
+});
+const outputModelValue = computed(() => {
+    if (stakedRatio.value.isZero()) {
+        return ethers.constants.Zero;
+    }
+    const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
+    console.log('outputModelValue computed: ', output.toString());
+    return output;
+});
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
+    balance => balance.token.contract === systemToken.address)[0],
+);
+const systemTokenFiatPrice = computed(() => systemTokenBalanceInfo.value?.token.price.getAmountInFiatStr(1) ?? '1');
+const systemTokenBalance = computed(() => systemTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
+const sidebarContent = computed(() => {
+    const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
+    const content = [{
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_1',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_2_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_3',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_4_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_5',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }];
+
+    return {
+        header,
+        content,
+    };
+});
+const availableTostake = computed(() => {
+    const available = systemTokenBalance.value.sub(estimatedGas.value);
+
+    if (available.lt(0)) {
+        return ethers.constants.Zero;
+    }
+    return available;
+});
+const formIsValid = computed(() =>
+    !inputModelValue.value.isZero() &&
+    inputModelValue.value.lt(availableTostake.value),
+);
+const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeEVMSystemTokens'));
+
+
+// methods
+onBeforeMount(() => {
+    // https://github.com/telosnetwork/telos-wallet/issues/274
+    const GAS_FOR_stakePING_TOKEN = 55500;
+    chainSettings.getEstimatedGas(GAS_FOR_stakePING_TOKEN).then((gas) => {
+        estimatedGas.value = gas.system;
+    });
+});
+
+async function handleCtaClick() {
+    const label = 'logged';
+    if (!await accountStore.isConnectedToCorrectNetwork(label)) {
+        const networkName = useChainStore().loggedChain.settings.getDisplay();
+        const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
+
+        ant.config.notifyFailureWithAction(errorMessage, {
+            label: ant.config.localizationHandler('evm_wallet.switch'),
+        });
+
+        return;
+    }
+
+    if (formIsValid.value) {
+        try {
+            const tx = await useRexStore().stakeEVMSystemTokens(label, inputModelValue.value);
+            const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
+
+            const dismiss = ant.config.notifyNeutralMessageHandler(
+                $t('notification.neutral_message_staking', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+            );
+
+            tx.wait().then(() => {
+                ant.config.notifySuccessfulTrxHandler(
+                    `${chainSettings.getExplorerUrl()}/tx/${tx.hash}`,
+                );
+            }).catch((err) => {
+                console.error(err);
+            }).finally(() => {
+                dismiss();
+            });
+        } catch (err) {
+            console.error(err);
+        }
+    }
+}
+</script>
+
+<template>
+<EVMSidebarPage :sidebar-content="sidebarContent">
+
+    <!-- convert ratio 1:stakedRatio -->
+    <div class="row q-mb-xl">
+        <div class="col-12">
+            <div class="c-stake-tab__badge-container">
+                <ConversionRateBadge
+                    :token-one-symbol="systemTokenSymbol"
+                    :token-two-symbol="stakedTokenSymbol"
+                    :token-two-decimals="systemTokenDecimals"
+                    :token-two-amount="stakedRatio"
+                    :decimals="uiDecimals"
+                />
+            </div>
+        </div>
+    </div>
+
+    <!-- TLOS input -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="inputModelValue"
+                :symbol="systemTokenSymbol"
+                :decimals="systemTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :secondary-currency-code="fiatCurrency"
+                :secondary-currency-decimals="2"
+                :secondary-currency-conversion-factor="systemTokenFiatPrice"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                :max-value="availableTostake"
+                class="c-stake-tab__input"
+            />
+        </div>
+    </div>
+
+    <!-- arrow -->
+    <div class="row q-mb-sm">
+        <div class="col-12 text-center">
+            <img
+                src="~assets/icon--arrow-down.svg"
+                :alt="$t('global.arrow_icon_alt')"
+                height="20"
+                width="18"
+            >
+        </div>
+    </div>
+
+    <!-- output field (readonly) -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="outputModelValue"
+                :symbol="stakedTokenSymbol"
+                :decimals="stakedTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                class="c-stake-tab__input"
+                readonly="readonly"
+            />
+        </div>
+    </div>
+
+    <!-- stake button -->
+    <div class="row">
+        <div class="col-12">
+            <div class="c-stake-tab__cta-container">
+                <q-btn
+                    color="primary"
+                    :disable="!formIsValid"
+                    :loading="ctaIsLoading"
+                    :label="$t('evm_stake.stake')"
+                    :aria-label="$t(
+                        'evm_stake.stake_button_label',
+                        { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+                    )"
+                    @click="handleCtaClick"
+                />
+            </div>
+        </div>
+    </div>
+</EVMSidebarPage>
+</template>
+
+<style lang="scss">
+.c-stake-tab {
+    &__badge-container,
+    &__cta-container,
+    &__input {
+        max-width: 320px;
+        margin: auto;
+    }
+
+    &__badge-container,
+    &__cta-container {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+</style>
diff --git a/test/jest/utils/antelope/index.ts b/test/jest/utils/antelope/index.ts
index a1d6dfe35..8096f186b 100644
--- a/test/jest/utils/antelope/index.ts
+++ b/test/jest/utils/antelope/index.ts
@@ -54,3 +54,4 @@ export * from 'test/jest/utils/antelope/store-platform';
 export * from 'test/jest/utils/antelope/wagmi-web3';
 export * from 'test/jest/utils/antelope/globalProps';
 
+
diff --git a/test/jest/utils/antelope/mockData.ts b/test/jest/utils/antelope/mockData.ts
index 3aa6d63f6..a7a412931 100644
--- a/test/jest/utils/antelope/mockData.ts
+++ b/test/jest/utils/antelope/mockData.ts
@@ -96,6 +96,8 @@ const MockData = {
         id: CHAIN_ID,
         display: TEST_NETWORK_NAME,
         hyperionEndpoint: ENDPOINT_URL,
+        stakedRatio: ethers.BigNumber.from('0600000000000000000'),
+        unstakedRatio: ethers.BigNumber.from('1200000000000000000'),
     },
     Network: TEST_NETWORK,
     ExplorerUrl: EXPLORER_URL,
diff --git a/test/jest/utils/antelope/store-chain.ts b/test/jest/utils/antelope/store-chain.ts
index 92d49ff0c..a9ab1b180 100644
--- a/test/jest/utils/antelope/store-chain.ts
+++ b/test/jest/utils/antelope/store-chain.ts
@@ -39,6 +39,8 @@ const getTokens = jest.fn().mockImplementation(() => Chain.tokens);
 const getExplorerUrl = jest.fn().mockImplementation(() => MockData.ExplorerUrl);
 const getEcosystemUrl = jest.fn().mockImplementation(() => MockData.EcosystemUrl);
 const getNetworkSettings = jest.fn().mockImplementation(() => ChainSettings);
+const getStakedRatio = jest.fn().mockImplementation(() => MockData.Chain.stakedRatio);
+const getUnstakedRatio = jest.fn().mockImplementation(() => MockData.Chain.unstakedRatio);
 
 // actions -
 const updateChainData = jest.fn().mockImplementation(() => ({
@@ -72,6 +74,8 @@ const ChainGetters = {
     getExplorerUrl,
     getEcosystemUrl,
     getNetworkSettings,
+    getStakedRatio,
+    getUnstakedRatio,
 };
 
 const ChainActions = {
diff --git a/test/jest/utils/antelope/store-utils.ts b/test/jest/utils/antelope/store-utils.ts
new file mode 100644
index 000000000..4c9df85ad
--- /dev/null
+++ b/test/jest/utils/antelope/store-utils.ts
@@ -0,0 +1,12 @@
+
+const subscribeForTransactionReceipt = jest.fn().mockImplementation(() => ({
+    then: jest.fn().mockImplementation((cb: () => void) => cb()),
+}));
+
+jest.mock('src/antelope/stores/utils/trx-utils', () => ({
+    subscribeForTransactionReceipt,
+}));
+
+export {
+    subscribeForTransactionReceipt,
+};

From 44209194285b5608bb5129445ffbd9b7dd6ba48c Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Thu, 7 Sep 2023 12:46:54 -0400
Subject: [PATCH 122/268] fix total rows text

---
 src/antelope/stores/history.ts                |  3 ---
 src/antelope/types/EvmTransaction.ts          | 10 ---------
 src/pages/evm/wallet/WalletPage.vue           |  5 ++---
 .../evm/wallet/WalletTransactionsTab.vue      | 22 +++++++++----------
 4 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 57ff43bec..e89256b0f 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -28,7 +28,6 @@ import {
     ParsedIndexerAccountTransactionsContract,
     EVMTransactionsPaginationData,
     TransactionValueData,
-    EvmSwapFunctionNames,
     EvmTransfer,
     IndexerContractData,
     NftTransactionData,
@@ -401,8 +400,6 @@ export const useHistoryStore = defineStore(store_name, {
                     } else if (functionName === 'mint') {
                         actionName = 'mint'; // eztodo handle this in the UI, add it to the correct interface as comment
                     } else if (txIsASend) {
-                        // eztodo fix nft send/receive label
-                        // eztodo special case for mint
                         actionName = 'send';
                     } else if (txIsAReceive) {
                         actionName = 'receive';
diff --git a/src/antelope/types/EvmTransaction.ts b/src/antelope/types/EvmTransaction.ts
index 60600d626..76297f101 100644
--- a/src/antelope/types/EvmTransaction.ts
+++ b/src/antelope/types/EvmTransaction.ts
@@ -56,16 +56,6 @@ export interface NftTransactionData {
     nftInterface: NftTokenInterface;
 }
 
-export const EvmSwapFunctionNames = [
-    'swapExactTokensForTokens',
-    'swapTokensForExactTokens',
-    'swapExactETHForTokens',
-    'swapTokensForExactETH',
-    'swapExactTokensForETH',
-    'swapETHForExactTokens',
-    'swapETHToTokens',
-];
-
 export interface ShapedTransactionRow {
     id: string; // transaction ID
     epoch: number; // epoch in milliseconds
diff --git a/src/pages/evm/wallet/WalletPage.vue b/src/pages/evm/wallet/WalletPage.vue
index 48f4160f6..fed917937 100644
--- a/src/pages/evm/wallet/WalletPage.vue
+++ b/src/pages/evm/wallet/WalletPage.vue
@@ -40,15 +40,14 @@ watch(accountStore, (newAccountStoreState) => {
 
     // if user is on the balances screen, prefetch transactions & transfers
     if (newAccount?.address && route.query.tab !== 'transactions') {
+        console.log('prefetching transactions'); // eztodo
         historyStore.setEVMTransactionsFilter({
             address: newAccount.address,
             offset: 0,
             limit: 5,
             includeAbi: true,
         });
-        historyStore.fetchEvmNftTransfersForAccount('current', newAccount.address).then(() => {
-            historyStore.fetchEVMTransactionsForAccount('current');
-        });
+        historyStore.fetchEVMTransactionsForAccount('current');
     }
 }, { immediate: true });
 
diff --git a/src/pages/evm/wallet/WalletTransactionsTab.vue b/src/pages/evm/wallet/WalletTransactionsTab.vue
index 6201a3f57..816929e5c 100644
--- a/src/pages/evm/wallet/WalletTransactionsTab.vue
+++ b/src/pages/evm/wallet/WalletTransactionsTab.vue
@@ -53,6 +53,9 @@ export default defineComponent({
         shapedTransactions() {
             return historyStore.getShapedTransactionRows('current') ?? [];
         },
+        totalRows() {
+            return historyStore.getEvmTransactionsRowCount('current');
+        },
         totalRowsText() {
             if (this.loading) {
                 return '';
@@ -62,26 +65,26 @@ export default defineComponent({
                 'evm_wallet.viewing_n_transactions',
                 {
                     rowsPerPage,
-                    totalRows: this.pagination.rowsNumber,
+                    totalRows: this.totalRows,
                 },
             );
         },
     },
     watch: {
-        shapedTransactions(newValue) {
-            this.pagination.rowsNumber = newValue.length;
-        },
-        // eztodo debounce fetch tx
         address() {
             // address can be initially undefined; wait to load txs until it's defined
             // also reload txs if the user switches accounts
-            console.log('getting txs from addy change'); // eztodo
-
             this.getTransactions();
         },
         pagination() {
             this.getTransactions();
         },
+        totalRows: {
+            immediate: true,
+            handler(newValue) {
+                this.pagination.rowsNumber = newValue;
+            },
+        },
     },
     created() {
         if (this.shapedTransactions.length) {
@@ -109,8 +112,6 @@ export default defineComponent({
     },
     methods: {
         async getTransactions() {
-            console.log('getTransactions');
-
             const offset = (this.pagination.page - 1) * this.pagination.rowsPerPage;
             let limit = this.pagination.rowsPerPage;
 
@@ -131,9 +132,6 @@ export default defineComponent({
                     includeAbi: true,
                 });
                 try {
-                    if (historyStore.getEVMTransfers('current').length === 0) {
-                        await historyStore.fetchEvmNftTransfersForAccount('current', this.address);
-                    }
                     await historyStore.fetchEVMTransactionsForAccount('current');
                     this.pagination.rowsNumber = historyStore.getEvmTransactionsRowCount('current');
                     this.initialLoadComplete = true;

From c9ec978cdd2077fa0c3869abb46f7bb6b0f90099 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Thu, 7 Sep 2023 14:22:30 -0400
Subject: [PATCH 123/268] cleanup, bugfixes

---
 src/antelope/chains/EVMChainSettings.ts       |  2 -
 src/antelope/stores/history.ts                | 57 ++++++++++---------
 src/components/evm/TableControls.vue          |  2 +
 src/i18n/en-us/index.js                       |  1 +
 src/pages/evm/nfts/NftViewer.vue              |  4 +-
 .../evm/wallet/WalletTransactionsTab.vue      | 24 ++++----
 6 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 5c004c07e..0f510eec0 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -431,8 +431,6 @@ export default abstract class EVMChainSettings implements ChainSettings {
         contract,
         includeAbi,
     }: IndexerTransfersFilter): Promise<IndexerAccountTransfersResponse> {
-        console.log(account); // eztodo remove this
-
         let aux = {};
 
         if (limit !== undefined) {
diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index e89256b0f..50a95602a 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -41,6 +41,7 @@ import { getAntelope, useContractStore, useNftsStore, useUserStore } from '..';
 import { formatUnits } from 'ethers/lib/utils';
 import { getGasInTlos, WEI_PRECISION } from 'src/antelope/stores/utils';
 import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { dateIsWithinXMinutes } from 'src/antelope/stores/utils/date-utils';
 import { getFiatPriceFromIndexer } from 'src/api/price';
 
 export const transfers_filter_limit = 10000;
@@ -70,9 +71,15 @@ export interface HistoryState {
 
 const store_name = 'history';
 
+// these are used to prevent multiple fetches from happening at the same time;
+// if a fetch is already running, the next fetch will be queued up and run after the current fetch is complete
+// without ending the loading state. This prevents the loading state from flickering on and off if
+// subsequent calls are made to the fetch method before it returns
+// (e.g. when loading the balances tab, which prefetches transactions, and quickly switching to the transactions tab)
 let fetchAccoutTransactionsIsRunning = false;
 let shouldRefetchAccoutTransactions = false;
-// let fetchNftTransfersQueued: null | { label: Label, account: string } = null;
+
+let nftTransfersUpdated : number | null = null; // the time in milliseconds since epoch when the NFT transfers were last updated
 
 export const useHistoryStore = defineStore(store_name, {
     state: (): HistoryState => (historyInitialState),
@@ -99,6 +106,8 @@ export const useHistoryStore = defineStore(store_name, {
         },
 
         // actions ---
+
+        // fetch all transactions for the account defined in __evm_filter.address
         async fetchEVMTransactionsForAccount(label: Label = 'current') {
             this.trace('fetchEVMTransactionsForAccount', label);
             const feedbackStore = useFeedbackStore();
@@ -118,10 +127,14 @@ export const useHistoryStore = defineStore(store_name, {
 
             try {
                 shouldRefetchAccoutTransactions = false;
-                // eztodo where to debounce?
                 // for NFTs (ERC1155 and ERC721), we need to fetch information from the transfers endpoint,
                 // which returns data required for the UI
-                if (!this.__evm_nft_transfers[label].transfers.length) {
+                // so if the user has not fetched NFT transfers yet, or if the NFT transfers are stale (3 mins),
+                // fetch them now
+                if (
+                    !this.__evm_nft_transfers[label].transfers.length ||
+                    (nftTransfersUpdated && dateIsWithinXMinutes(nftTransfersUpdated, 3))
+                ) {
                     await this.fetchEvmNftTransfersForAccount(label, this.__evm_filter.address);
                 }
 
@@ -141,6 +154,7 @@ export const useHistoryStore = defineStore(store_name, {
                     };
                 });
 
+                // cache contracts
                 contractAddresses.forEach((address) => {
                     contractStore.addContractToCache(address, parsedContracts[address]);
                 });
@@ -164,7 +178,6 @@ export const useHistoryStore = defineStore(store_name, {
 
         // fetch all NFT transfers for an account (erc721, erc155)
         async fetchEvmNftTransfersForAccount(label: Label, account: string): Promise<void> {
-            // eztodo verify account
             const feedbackStore = useFeedbackStore();
             const contractStore = useContractStore();
 
@@ -175,6 +188,7 @@ export const useHistoryStore = defineStore(store_name, {
             const chainSettings = useChainStore().getChain(label).settings as EVMChainSettings;
 
             try {
+                // get all erc721 and erc1155 transfers for the given account
                 const [
                     erc721TransferResponse,
                     erc1155TransferResponse,
@@ -187,9 +201,10 @@ export const useHistoryStore = defineStore(store_name, {
                     }),
                 ));
 
-                const erc721Contracts = erc721TransferResponse.contracts;
+                const erc721Contracts  = erc721TransferResponse.contracts;
                 const erc1155Contracts = erc1155TransferResponse.contracts;
 
+                // cache all contracts
                 [erc721Contracts, erc1155Contracts].forEach((contracts) => {
                     const contractAddresses = Object.keys(contracts);
                     const parsedContracts: Record<string, IndexerContractData> = {};
@@ -211,14 +226,15 @@ export const useHistoryStore = defineStore(store_name, {
                     ...erc1155TransferResponse.results,
                 ];
 
+                // sort transfers from new to old
                 transfers.sort((a, b) => b.timestamp - a.timestamp);
 
                 this.setEVMTransfers(label, transfers);
             } catch (error) {
                 this.clearEVMTansfers();
-                // eztodo this error localization
-                throw new AntelopeError('antelope.history.error_fetching_transfers');
+                throw new AntelopeError('antelope.history.error_fetching_nft_transfers');
             } finally {
+                nftTransfersUpdated = (new Date()).getTime();
                 feedbackStore.unsetLoading('history.fetchEvmNftTransfersForAccount');
             }
         },
@@ -234,19 +250,12 @@ export const useHistoryStore = defineStore(store_name, {
             const chainSettings = (chain.settings as EVMChainSettings);
             const tlosInUsd = await chainSettings.getUsdPrice();
 
-            // eztodo perhaps i can get all transfers (erc20, erc1155, erc721) then check each transaction hash against the list of transfers. if there is a match,
-            // i can then call the NFT endpoint to get the token info. 3 issues: each of the transfers calls takes a long time, so they need to be gotten at some point
-            // in the background. also the transfers list can become stale, so they need to be refetched periodically. also, each transfers call needs a limit (say, 5000) or the
-            // response may be way too large. if the user goes far enough back in their tx history, they will eventually hit a point where the transactions exceed the transfers
-            // this request https://api.teloscan.io/v1/account/0x13B745FC35b0BAC9bab9fD20B7C9f46668232607/transfers?type=erc721&limit=9999999&offset=0&includePagination=false&includeAbi=false
-            // response is 70kb and took 2 seconds
-
             const allNftTransfers = this.__evm_nft_transfers[label].transfers;
 
             const transactionShapePromises = transactions.map(async (tx) => {
                 const erc20Transfers = await contractStore.getErc20TransfersFromTransaction(tx);
                 // const userAddressLower = this.__evm_filter.address.toLowerCase();
-                // eztodo revert
+                // eztodo revert, note this location in the testing notes
                 const userAddressLower = '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607'.toLowerCase();
 
                 const gasUsedInTlosBn = BigNumber.from(tx.gasPrice).mul(tx.gasused);
@@ -254,7 +263,9 @@ export const useHistoryStore = defineStore(store_name, {
                 const gasInUsdBn = convertCurrency(gasUsedInTlosBn, WEI_PRECISION, 2, tlosInUsd);
                 const gasInUsd = +(formatUnits(gasInUsdBn, 2));
 
-                // all contracts in transactions are cached, no need to use getContract
+                const systemTokenDecimals = chainSettings.getSystemToken().decimals;
+
+                // all contracts in transactions are already cached, no need to use getContract
                 const toPrettyName = contractStore.__cachedContracts[tx.to?.toLowerCase()]?.name ?? '';
                 const fromPrettyName = contractStore.__cachedContracts[tx.from?.toLowerCase()]?.name ?? '';
 
@@ -278,23 +289,21 @@ export const useHistoryStore = defineStore(store_name, {
 
                 let actionName = '';
 
-                // eztodo replace instances of +tx.value
                 if (!isFailed) {
                     if (+tx.value) {
-                        // eztodo change from WEI_PRECISION to token decimals?
-                        const valueInFiatBn = convertCurrency(BigNumber.from(tx.value), WEI_PRECISION, 2, tlosInUsd);
+                        const valueInFiatBn = convertCurrency(BigNumber.from(tx.value), systemTokenDecimals, 2, tlosInUsd);
                         const valueInFiat = +formatUnits(valueInFiatBn, 2);
 
                         if (tx.from?.toLowerCase() === userAddressLower) {
                             valuesOut.push({
-                                amount: +formatUnits(tx.value, WEI_PRECISION),
+                                amount: +formatUnits(tx.value, systemTokenDecimals),
                                 symbol: chainSettings.getSystemToken().symbol,
                                 fiatValue: valueInFiat,
                             });
                         }
                         if (tx.to?.toLowerCase() === userAddressLower) {
                             valuesIn.push({
-                                amount: +formatUnits(tx.value, WEI_PRECISION),
+                                amount: +formatUnits(tx.value, systemTokenDecimals),
                                 symbol: chainSettings.getSystemToken().symbol,
                                 fiatValue: valueInFiat,
                             });
@@ -303,7 +312,7 @@ export const useHistoryStore = defineStore(store_name, {
 
                     // eztodo for reference, a tx with multiple 1155 xfers: https://www.teloscan.io/tx/0xf7a2cadfce5adcd33c592d3aa277bf87ea5c06961e6a7e4f12e6a2bae7b595e5
                     // eztodo for reference, a 721 tx : 0x893c7d83b2bef2758e3bed78ba2ca93a3102059f6c6da0d91aa58b6f1a62ab75
-                    const nftTransfersInTx = allNftTransfers.filter(transfer => transfer.transaction === tx.hash);
+                    const nftTransfersInTx = allNftTransfers.filter(transfer => transfer.transaction.toLowerCase() === tx.hash.toLowerCase());
 
                     if (nftTransfersInTx.length > 0) {
                         // there is at least 1 NFT transfer in this transaction,
@@ -394,17 +403,13 @@ export const useHistoryStore = defineStore(store_name, {
                     const txIsASend    = (valuesOut.length > 0 || nftsOut.length > 0) && (valuesIn.length  === 0 && nftsIn.length  === 0);
                     const txIsAReceive = (valuesIn.length  > 0 || nftsIn.length  > 0) && (valuesOut.length === 0 && nftsOut.length === 0);
 
-                    // eztodo occasional error when live fetching txs
                     if (isContractCreation) {
                         actionName = 'contractCreation';
-                    } else if (functionName === 'mint') {
-                        actionName = 'mint'; // eztodo handle this in the UI, add it to the correct interface as comment
                     } else if (txIsASend) {
                         actionName = 'send';
                     } else if (txIsAReceive) {
                         actionName = 'receive';
                     } else if (txIsASwap) {
-                        // eztodo remove swapfunctionnames const
                         actionName = 'swap';
                     } else if (functionName) {
                         actionName = functionName;
diff --git a/src/components/evm/TableControls.vue b/src/components/evm/TableControls.vue
index 577a5301d..b6750fa36 100644
--- a/src/components/evm/TableControls.vue
+++ b/src/components/evm/TableControls.vue
@@ -67,6 +67,8 @@ function changePageNumber(direction: 'next' | 'prev' | 'first' | 'last') {
         ...props.pagination,
         page,
     });
+
+    window.scrollTo(0, 0);
 }
 </script>
 
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index f181527d5..225cb9bc9 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -482,6 +482,7 @@ export default {
         },
         history: {
             error_fetching_transactions: 'Unexpected error fetching transactions. Please refresh the page to try again.',
+            error_fetching_nft_transfers: 'Unexpected error fetching NFT transfers. Please refresh the page to try again.',
         },
         chain: {
             error_update_data: 'Error in updating data',
diff --git a/src/pages/evm/nfts/NftViewer.vue b/src/pages/evm/nfts/NftViewer.vue
index f7e13f87f..6c476c369 100644
--- a/src/pages/evm/nfts/NftViewer.vue
+++ b/src/pages/evm/nfts/NftViewer.vue
@@ -310,9 +310,9 @@ function setHoverPreviewVisibility(visible: boolean) {
     >
         <q-skeleton v-if="isMediaLoading && !passedMaxLoadingTime" type="rect" class="c-nft-viewer__list-image" />
         <q-icon
-            v-else-if="nft.videoSrc && !(isMediaLoading && passedMaxLoadingTime)"
+            v-else-if="nft.videoSrc"
             name="o_movie"
-            :alt="`${$t('nft.broken_image')} ${imageAlt}`"
+            :alt="imageAlt"
             size="md"
             color="grey-7"
             class="c-nft-viewer__list-image"
diff --git a/src/pages/evm/wallet/WalletTransactionsTab.vue b/src/pages/evm/wallet/WalletTransactionsTab.vue
index 816929e5c..19f4cb4dc 100644
--- a/src/pages/evm/wallet/WalletTransactionsTab.vue
+++ b/src/pages/evm/wallet/WalletTransactionsTab.vue
@@ -27,6 +27,7 @@ export default defineComponent({
         errorsFound: false,
         fetchTransactionsInterval: null as null | ReturnType<typeof setInterval>,
         initialLoadComplete: false,
+        rowsPerPageUpdating: false, // eztodo comment here
     }),
     computed: {
         doLiveUpdate() {
@@ -36,11 +37,12 @@ export default defineComponent({
             return this.shapedTransactions.map(tx => tx.id);
         },
         loading() {
-            // eztodo when loading balances tab then clicking transactions tab, it says "showing 5 of 0 transactions"
             const txLoading = feedbackStore.isLoading('history.fetchEVMTransactionsForAccount');
             const transfersLoading = feedbackStore.isLoading('history.fetchEvmNftTransfersForAccount');
             const actionsInProgress = txLoading || transfersLoading;
-            const hideLoadingState = this.pagination.page === 1 && this.initialLoadComplete;
+            const hideLoadingState = this.pagination.page === 1 && this.initialLoadComplete && !this.rowsPerPageUpdating;
+
+            // eztodo odd behavior for video NFT icons
 
             // don't show the loading state if we're on the first page and transactions are already present
             // this covers two scenarios, 1. the user came to the page from the balances page, meaning we prefetched transactions
@@ -76,8 +78,13 @@ export default defineComponent({
             // also reload txs if the user switches accounts
             this.getTransactions();
         },
-        pagination() {
-            this.getTransactions();
+        pagination(newPagination, oldPagination) {
+            if (newPagination.rowsPerPage !== oldPagination.rowsPerPage) {
+                this.rowsPerPageUpdating = true;
+            }
+            this.getTransactions().finally(() => {
+                this.rowsPerPageUpdating = false;
+            });
         },
         totalRows: {
             immediate: true,
@@ -91,19 +98,11 @@ export default defineComponent({
             this.initialLoadComplete = true;
         }
 
-        // eztodo add interval for transfers
         this.fetchTransactionsInterval = setInterval(() => {
             if (this.doLiveUpdate) {
-                // eztodo
-                console.log('getting txs from interval');
-
                 this.getTransactions();
             }
         }, 13000);
-
-        // this.getTransactions().finally(() => {
-        //     this.initialLoadComplete = true;
-        // });
     },
     unmounted() {
         if (this.fetchTransactionsInterval) {
@@ -170,7 +169,6 @@ export default defineComponent({
         {{ $t('evm_wallet.no_transactions_found') }}
     </h5>
 
-    <!-- eztodo transactions dont exist on teloscan -->
     <template v-else>
         <WalletTransactionRow
             v-for="(tx, index) of shapedTransactions"

From 9acde4f83b1b1682ee25122c7ce4778e732675e3 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Thu, 7 Sep 2023 14:34:37 -0400
Subject: [PATCH 124/268] cleanup, add text util tests

---
 src/antelope/stores/utils/text-utils.ts       | 27 +++++++++++++++++--
 src/pages/evm/wallet/WalletTransactionRow.vue | 22 +++++----------
 2 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/antelope/stores/utils/text-utils.ts b/src/antelope/stores/utils/text-utils.ts
index cef5f6909..5ad16ce8e 100644
--- a/src/antelope/stores/utils/text-utils.ts
+++ b/src/antelope/stores/utils/text-utils.ts
@@ -4,8 +4,9 @@
  *
  * @param text
  * @param maxLength
+ * @returns {string}
  */
-export function truncateText(text: string, maxLength = 10) {
+export function truncateText(text: string, maxLength = 10): string {
     if (text.length <= maxLength) {
         return text;
     }
@@ -18,7 +19,29 @@ export function truncateText(text: string, maxLength = 10) {
  *
  * @param address
  * @param maxLength
+ * @returns {string}
  */
-export function truncateAddress(address: string) {
+export function truncateAddress(address: string): string {
     return `${address.slice(0, 6)}...${address.slice(-4)}`;
 }
+
+/**
+ * Given a name and an id, returns the name without the ID. Generally in the UI, NFT name and ID are displayed next to each other;
+ * this function prevents the ID from duplicated
+ * @param name
+ * @param id
+ * @returns {string}
+ * @example
+ * getShapedNftName('SomeNft #1234', '1234') // 'SomeNft'
+ */
+export function getShapedNftName(name: string, id: string): string {
+    let shapedName = name;
+    if (name.includes(id)) {
+        shapedName = name.replace(id, '');
+
+        if (shapedName[shapedName.length - 1] === '#') {
+            shapedName = shapedName.slice(0, -1);
+        }
+    }
+    return shapedName.trim();
+}
diff --git a/src/pages/evm/wallet/WalletTransactionRow.vue b/src/pages/evm/wallet/WalletTransactionRow.vue
index 9600206d4..4db9dd401 100644
--- a/src/pages/evm/wallet/WalletTransactionRow.vue
+++ b/src/pages/evm/wallet/WalletTransactionRow.vue
@@ -8,7 +8,7 @@ import { NFTClass, ShapedTransactionRow } from 'src/antelope/types';
 
 import { getLongDate } from 'src/antelope/stores/utils';
 import { getCurrencySymbol, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
-import { truncateAddress } from 'src/antelope/stores/utils/text-utils';
+import { getShapedNftName, truncateAddress } from 'src/antelope/stores/utils/text-utils';
 
 import ExternalLink from 'components/ExternalLink.vue';
 import TimeStamp from 'components/TimeStamp.vue';
@@ -179,22 +179,12 @@ export default defineComponent({
             return `${formatted} ${symbol}`;
         },
         getShapedTokenName(name: string, id: string) {
-            // if the token name includes the ID, remove the ID because we display ID separately
-            // eztodo make this a util function
-            let shapedName = name;
-            if (name.includes(id)) {
-                shapedName = name.replace(id, '');
-
-                if (shapedName[shapedName.length - 1] === '#') {
-                    shapedName = shapedName.slice(0, -1);
-                }
-            }
-            return shapedName.trim();
+            return getShapedNftName(name, id);
         },
         getTruncatedAddress(address: string) {
             return truncateAddress(address);
         },
-        getCachedNftData(collectionAddress: string, tokenId: string): NFTClass | undefined {
+        getCachedNftData(collectionAddress: string, tokenId: string): NFTClass {
             return this.nftData[`${collectionAddress.toLowerCase()}-${tokenId}`];
         },
     },
@@ -319,7 +309,6 @@ export default defineComponent({
             </div>
         </div>
 
-        <!-- eztodo scroll up when changing rowsperpage or page number, revert all changes here -->
         <div
             v-for="(values, index) in transaction.valuesIn"
             :key="`values-in-${index}`"
@@ -351,12 +340,13 @@ export default defineComponent({
                 class="c-transaction-row__nft c-transaction-row__nft--in"
             >
                 <span>+{{ nftTransfer.quantity }}</span>
-                <!-- eztodo add test case to PR for no image src -->
+
                 <NftViewer
-                    :nft="getCachedNftData(nftTransfer.collectionAddress, nftTransfer.tokenId) as NFTClass"
+                    :nft="getCachedNftData(nftTransfer.collectionAddress, nftTransfer.tokenId)"
                     :previewMode="false"
                     :tileMode="false"
                 />
+
                 <div class="c-transaction-row__nft-info-container">
                     <div class="c-transaction-row__nft-name-container">
                         <div class="c-transaction-row__nft-name">

From e39ed2a90c5e15a2b99538b13a8a435c5b9ecb17 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Thu, 7 Sep 2023 14:48:37 -0400
Subject: [PATCH 125/268] cleanup color vars

---
 src/antelope/chains/EVMChainSettings.ts       |   3 +-
 src/antelope/stores/history.ts                |   5 -
 src/antelope/stores/utils/store-utils.ts      |  72 -----------
 src/antelope/types/EvmTransaction.ts          |   2 -
 src/antelope/types/NFTClass.ts                |   4 -
 src/components/NumberedList.vue               |   2 +-
 src/components/evm/AddressQR.vue              |   2 +-
 src/components/evm/AppNav.vue                 |   2 +-
 src/components/evm/AppPage.vue                |   2 +-
 src/components/evm/UserInfo.vue               |   2 +-
 src/css/global/_colors.scss                   |   4 -
 src/css/global/_z-index.scss                  |   2 +
 src/css/quasar.variables.sass                 |   1 -
 src/layouts/EVMSidebarPage.vue                |   2 +-
 src/pages/evm/nfts/NftTile.vue                |   2 +-
 src/pages/evm/nfts/NftViewer.vue              |  10 +-
 src/pages/evm/wallet/WalletBalanceRow.vue     |   4 +-
 src/pages/evm/wallet/WalletPage.vue           |   1 -
 src/pages/evm/wallet/WalletTransactionRow.vue |   2 +-
 .../evm/wallet/WalletTransactionsTab.vue      |   6 +-
 .../antelope/stores/utils/store-utils.spec.ts | 115 ------------------
 .../components/evm/AddressQR.spec.ts          |   2 +-
 22 files changed, 20 insertions(+), 227 deletions(-)
 delete mode 100644 src/antelope/stores/utils/store-utils.ts
 delete mode 100644 test/jest/__tests__/antelope/stores/utils/store-utils.spec.ts

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 0f510eec0..e0ecb4667 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -329,8 +329,9 @@ export default abstract class EVMChainSettings implements ChainSettings {
 
                     }
                     const contract_source = response.contracts[item_source.contract];
-                    // eztodo temporary
+
                     if (!contract_source) {
+                        // this case only happens if the indexer fails to index contract data
                         continue;
                     }
                     const contract = new NFTContractClass(contract_source);
diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 50a95602a..36a18c6be 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -310,8 +310,6 @@ export const useHistoryStore = defineStore(store_name, {
                         }
                     }
 
-                    // eztodo for reference, a tx with multiple 1155 xfers: https://www.teloscan.io/tx/0xf7a2cadfce5adcd33c592d3aa277bf87ea5c06961e6a7e4f12e6a2bae7b595e5
-                    // eztodo for reference, a 721 tx : 0x893c7d83b2bef2758e3bed78ba2ca93a3102059f6c6da0d91aa58b6f1a62ab75
                     const nftTransfersInTx = allNftTransfers.filter(transfer => transfer.transaction.toLowerCase() === tx.hash.toLowerCase());
 
                     if (nftTransfersInTx.length > 0) {
@@ -436,9 +434,6 @@ export const useHistoryStore = defineStore(store_name, {
 
             const shapedTransactions = await Promise.all(transactionShapePromises);
             this.setShapedTransactionRows(label, shapedTransactions);
-
-            // eztodo this one is frigged up, page 2 mind flayers
-            // https://www.teloscan.io/tx/0xa9d8d348dd524be0e649fabb9d8f9916b1f7c2222ea856e81a2ad91b219cf1b3
         },
 
 
diff --git a/src/antelope/stores/utils/store-utils.ts b/src/antelope/stores/utils/store-utils.ts
deleted file mode 100644
index 96de02e52..000000000
--- a/src/antelope/stores/utils/store-utils.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-
-/**
- * Creates and returns a debounced version of the provided asynchronous function.
- * The debounced function delays invoking the function until after `wait` milliseconds have passed since the last time the debounced function was invoked.
- * Multiple calls within the same "debounce window" will resolve to the same value.
- *
- * @template Context The type of the `this` context the function will be invoked with.
- * @template Args The argument types for the function to be debounced.
- * @template FnReturnType The return type for the function to be debounced.
- *
- * @param {(...args: Args) => Promise<FnReturnType> | FnReturnType} func - The function to debounce. Can return a Promise or a value.
- * @param {number} wait - The number of milliseconds to delay.
- *
- * @throws {Error} If `wait` is not a positive integer.
- *
- * @returns {(...args: Args) => Promise<FnReturnType>} A debounced function.
- *
- * @example
- * let callCounter = 0;
- *
- * function fetchSomeData(address: string) {
- *     callCounter++;
- *     return Promise.resolve(address);
- * }
- *
- * const debouncedFetchSomeData = debounceAsync(fetchSomeData, 1000);
- * const callOne = debouncedFetchSomeData('abc');
- * const callTwo = debouncedFetchSomeData('xyz');
- * const callOneResult = await callOne;
- * const callTwoResult = await callTwo;
- * console.log(callOneResult); // 'xyz'
- * console.log(callTwoResult); // 'xyz'
- * console.log(callCounter); // 1
- */
-// eztodo document how this should be used in the context of a store or object, like with the function ()... rather than arrow function
-// eztodo remove?
-export function debounceAsync<Context, Args extends Array<unknown>, FnReturnType>(
-    func: (this: Context, ...args: Args) => Promise<FnReturnType> | FnReturnType,
-    wait: number,
-): (...args: Args) => Promise<FnReturnType> {
-
-    if (wait % 1 !== 0 || wait <= 0) {
-        throw new Error('Invalid wait time. Wait time must be a positive integer.');
-    }
-
-    let timeout: ReturnType<typeof setTimeout> | undefined;
-    let pendingResolves: Array<(value: FnReturnType) => void> = [];
-
-    return function (this: Context, ...args: Args): Promise<FnReturnType> {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const context = this;
-        clearTimeout(timeout);
-
-        return new Promise<FnReturnType>((resolve) => {
-            pendingResolves.push(resolve);
-
-            timeout = setTimeout(async () => {
-                const result = await func.apply(context, args);
-
-                // Resolve all pending promises
-                pendingResolves.forEach(pendingResolve => pendingResolve(result));
-
-                // Clear the pendingResolves array
-                pendingResolves = [];
-
-                // clean up the timeout
-                clearTimeout(timeout);
-                timeout = undefined;
-            }, wait);
-        });
-    };
-}
diff --git a/src/antelope/types/EvmTransaction.ts b/src/antelope/types/EvmTransaction.ts
index 76297f101..3700eee2b 100644
--- a/src/antelope/types/EvmTransaction.ts
+++ b/src/antelope/types/EvmTransaction.ts
@@ -59,9 +59,7 @@ export interface NftTransactionData {
 export interface ShapedTransactionRow {
     id: string; // transaction ID
     epoch: number; // epoch in milliseconds
-    // eztodo are there nft swap functions? should mint be showed differently?
     // action should be 'send', 'receive', 'swap', 'contractCreation', or some other action like 'approve'
-    // a swap is any function in EvmSwapFunctionNames
     actionName: string;
     from: string; // address
     fromPrettyName?: string;
diff --git a/src/antelope/types/NFTClass.ts b/src/antelope/types/NFTClass.ts
index 98cc3cddd..ab46e9e9b 100644
--- a/src/antelope/types/NFTClass.ts
+++ b/src/antelope/types/NFTClass.ts
@@ -43,10 +43,6 @@ export class NFTContractClass {
     constructor(
         source: IndexerNftContract,
     ) {
-        // eztodo this
-        if (!source) {
-            debugger;
-        }
         this.indexer = source;
     }
 
diff --git a/src/components/NumberedList.vue b/src/components/NumberedList.vue
index ea0f8d26f..d4e6aacb9 100644
--- a/src/components/NumberedList.vue
+++ b/src/components/NumberedList.vue
@@ -55,7 +55,7 @@ To use this component, slots must be named as the index in the list, starting at
         border-radius: 50%;
         height: 24px;
         width: 24px;
-        border: 1px solid $page-header;
+        border: 1px solid var(--accent-color-5);
         justify-content: center;
         align-items: center;
     }
diff --git a/src/components/evm/AddressQR.vue b/src/components/evm/AddressQR.vue
index 290a4a95b..bc41143dd 100644
--- a/src/components/evm/AddressQR.vue
+++ b/src/components/evm/AddressQR.vue
@@ -17,7 +17,7 @@ const qrInstance = ref<QRious>();
 
 onMounted(() => {
     qrInstance.value = new QRious({
-        background: getComputedStyle(document.body).getPropertyValue('--header-bg-color'),
+        background: getComputedStyle(document.body).getPropertyValue('--accent-color-5'),
         level: 'H',
         size: props.size,
         element: document.getElementById('qr-code'),
diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 479ff74ce..221295771 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -437,7 +437,7 @@ export default defineComponent({
         justify-content: space-between;
         color: var(--header-text-color);
         padding: 16px 24px;
-        background-color: var(--header-bg-color);
+        background-color: var(--accent-color-5);
         z-index: $z-index--header-toolbar;
 
         @include md-and-up {
diff --git a/src/components/evm/AppPage.vue b/src/components/evm/AppPage.vue
index 0c0d884d1..011b3df60 100644
--- a/src/components/evm/AppPage.vue
+++ b/src/components/evm/AppPage.vue
@@ -105,7 +105,7 @@ export default defineComponent({
 
     &__header {
         color: var(--header-text-color);
-        background: var(--header-bg-color);
+        background: var(--accent-color-5);
 
         padding-top: 24px;
         position: relative;
diff --git a/src/components/evm/UserInfo.vue b/src/components/evm/UserInfo.vue
index 9a2578513..866da061f 100644
--- a/src/components/evm/UserInfo.vue
+++ b/src/components/evm/UserInfo.vue
@@ -172,7 +172,7 @@ export default defineComponent({
         transition-property: background-color, color;
 
         &:hover {
-            background-color: var(--bg-color-hover);
+            background-color: var(--accent-color-5);
             color: var(--accent-color);
 
             #{$this}__icon {
diff --git a/src/css/global/_colors.scss b/src/css/global/_colors.scss
index e42a35848..1f8dba135 100644
--- a/src/css/global/_colors.scss
+++ b/src/css/global/_colors.scss
@@ -24,7 +24,6 @@ $saveBtn: #2e1f4f;
     $accent-3: #DDD1FF;
     $accent-4: #A5A6F6;
     $accent-5: #F7F5FF;
-    $page-header: #F7F5FF; // eztodo this
     $site-gradient: linear-gradient(0.4turn, #071033, #6039A4);
     $high-contrast-text-color: #282828;
     $default-contrast-text-color: #4D4D4D;
@@ -54,9 +53,6 @@ $saveBtn: #2e1f4f;
     --positive-muted: #{rgba($positive, 0.5)};
 
     --bg-color: #{$canvas};
-    --bg-color-hover: #{$page-header};
-
-    --header-bg-color: #{$page-header};
 }
 
 // Dark Mode
diff --git a/src/css/global/_z-index.scss b/src/css/global/_z-index.scss
index 2cab26d4a..8faca1425 100644
--- a/src/css/global/_z-index.scss
+++ b/src/css/global/_z-index.scss
@@ -1,6 +1,8 @@
 $z-index--menu: 999;
 $z-index--header-toolbar: 998;
 
+$z-index--nft-hover-preview: 900;
+
 $z-index--footer: 2;
 $z-index--connect-wallet-popup: 3;
 
diff --git a/src/css/quasar.variables.sass b/src/css/quasar.variables.sass
index 9ae29be29..8e448ab3e 100644
--- a/src/css/quasar.variables.sass
+++ b/src/css/quasar.variables.sass
@@ -24,7 +24,6 @@ $info      : #dfdfed
 $warning   : #AD6500
 
 $available-color: #172c6c
-$page-header: #F7F5FF
 $notify-success: #255B00
 $notify-error: #880000
 $notify-neutral: #4D4D4D
diff --git a/src/layouts/EVMSidebarPage.vue b/src/layouts/EVMSidebarPage.vue
index 8afd093f3..1789387bc 100644
--- a/src/layouts/EVMSidebarPage.vue
+++ b/src/layouts/EVMSidebarPage.vue
@@ -102,7 +102,7 @@ function handleExpansionItemUpdate() {
 
     &__expansion-item {
         border-radius: 4px;
-        border: 2px solid var(--header-bg-color);
+        border: 2px solid var(--accent-color-5);
         margin-bottom: 8px;
         height: fit-content;
 
diff --git a/src/pages/evm/nfts/NftTile.vue b/src/pages/evm/nfts/NftTile.vue
index e166eae6f..48e03614f 100644
--- a/src/pages/evm/nfts/NftTile.vue
+++ b/src/pages/evm/nfts/NftTile.vue
@@ -66,7 +66,7 @@ const showId = computed(() => !props.nft.name.includes(props.nft.id));
 <style lang="scss">
 .c-nft-tile {
     border-radius: 4px;
-    border: 1px solid $page-header;
+    border: 1px solid var(--accent-color-5);
     padding: 16px 24px;
 
     display: flex;
diff --git a/src/pages/evm/nfts/NftViewer.vue b/src/pages/evm/nfts/NftViewer.vue
index 6c476c369..f4378bbb6 100644
--- a/src/pages/evm/nfts/NftViewer.vue
+++ b/src/pages/evm/nfts/NftViewer.vue
@@ -149,8 +149,7 @@ function calculateHoverPreviewPosition() {
     };
     const hoverElementSize = 278;
 
-    // eztodo make some notes about this logic
-    // eztodo consolidate setproperties
+    // true if there is enough room between the icon and navbar to fit the hover element; if false, the hover element will be shown below
     const hoverElementWillFitAbove = (iconRect.top > (hoverElementSize + chevronHeight + padding + navBarHeight));
 
     // the amount that the hover element would be clipped by the left nav / left side of the window
@@ -191,8 +190,6 @@ function setHoverPreviewVisibility(visible: boolean) {
     }
 
     // set position variables
-    // eztodo handle scroll
-    // eztodo only calculate position if hovering
     calculateHoverPreviewPosition();
     isHovering.value = visible;
 }
@@ -484,7 +481,7 @@ function setHoverPreviewVisibility(visible: boolean) {
         min-height: 270px;
         max-width: 432px;
         border-radius: 4px;
-        background-color: var(--header-bg-color);
+        background-color: var(--accent-color-5);
         border: 1px solid var(--header-item-outline-color);
     }
 
@@ -512,7 +509,7 @@ function setHoverPreviewVisibility(visible: boolean) {
         left: var(--hover-preview-x);
         top: var(--hover-preview-y);
         background: var(--accent-color-5);
-        z-index: 9999; // eztodo this
+        z-index: $z-index--nft-hover-preview;
         border-radius: 4px;
         padding: 8px;
 
@@ -525,7 +522,6 @@ function setHoverPreviewVisibility(visible: boolean) {
             height: 24px;
             width: 24px;
             background: linear-gradient(45deg, var(--accent-color-5) 50%, transparent 50%);
-            z-index: -1;
             box-shadow: -3px 4px 5px -4px rgba(0,0,0,0.6);
         }
     }
diff --git a/src/pages/evm/wallet/WalletBalanceRow.vue b/src/pages/evm/wallet/WalletBalanceRow.vue
index 825997da3..203261c4b 100644
--- a/src/pages/evm/wallet/WalletBalanceRow.vue
+++ b/src/pages/evm/wallet/WalletBalanceRow.vue
@@ -342,7 +342,7 @@ export default defineComponent({
     display: flex;
     justify-content: space-between;
     border-radius: 4px;
-    border-bottom: 2px solid var(--header-bg-color);
+    border-bottom: 2px solid var(--accent-color-5);
     padding: 24px 4px;
     overflow-x: hidden;
     max-width: 100%;
@@ -444,7 +444,7 @@ export default defineComponent({
         transition-property: background-color, color;
 
         &:hover {
-            background-color: var(--bg-color-hover);
+            background-color: var(--accent-color-5);
 
             #{$this}__overflow-icon {
                 &:not(#{$this}__overflow-icon--stroke) path {
diff --git a/src/pages/evm/wallet/WalletPage.vue b/src/pages/evm/wallet/WalletPage.vue
index fed917937..7b4ec0f6f 100644
--- a/src/pages/evm/wallet/WalletPage.vue
+++ b/src/pages/evm/wallet/WalletPage.vue
@@ -40,7 +40,6 @@ watch(accountStore, (newAccountStoreState) => {
 
     // if user is on the balances screen, prefetch transactions & transfers
     if (newAccount?.address && route.query.tab !== 'transactions') {
-        console.log('prefetching transactions'); // eztodo
         historyStore.setEVMTransactionsFilter({
             address: newAccount.address,
             offset: 0,
diff --git a/src/pages/evm/wallet/WalletTransactionRow.vue b/src/pages/evm/wallet/WalletTransactionRow.vue
index 4db9dd401..c1ce702bf 100644
--- a/src/pages/evm/wallet/WalletTransactionRow.vue
+++ b/src/pages/evm/wallet/WalletTransactionRow.vue
@@ -393,7 +393,7 @@ export default defineComponent({
 .c-transaction-row {
     max-width: 1000px;
     padding: 16px 8px;
-    border-bottom: 2px solid $page-header;
+    border-bottom: 2px solid var(--accent-color-5);
     display: grid;
     gap: 16px;
     grid-template:
diff --git a/src/pages/evm/wallet/WalletTransactionsTab.vue b/src/pages/evm/wallet/WalletTransactionsTab.vue
index 19f4cb4dc..b1b4ce778 100644
--- a/src/pages/evm/wallet/WalletTransactionsTab.vue
+++ b/src/pages/evm/wallet/WalletTransactionsTab.vue
@@ -27,7 +27,7 @@ export default defineComponent({
         errorsFound: false,
         fetchTransactionsInterval: null as null | ReturnType<typeof setInterval>,
         initialLoadComplete: false,
-        rowsPerPageUpdating: false, // eztodo comment here
+        rowsPerPageUpdating: false, // used to ensure loading state is shown when rows per page is updated
     }),
     computed: {
         doLiveUpdate() {
@@ -42,8 +42,6 @@ export default defineComponent({
             const actionsInProgress = txLoading || transfersLoading;
             const hideLoadingState = this.pagination.page === 1 && this.initialLoadComplete && !this.rowsPerPageUpdating;
 
-            // eztodo odd behavior for video NFT icons
-
             // don't show the loading state if we're on the first page and transactions are already present
             // this covers two scenarios, 1. the user came to the page from the balances page, meaning we prefetched transactions
             // or 2. the user is on the first page and we are re-fetching transactions on an interval
@@ -197,7 +195,7 @@ export default defineComponent({
         gap: 8px;
         padding-bottom: 24px;
         margin-bottom: 24px;
-        border-bottom: 2px solid $page-header;
+        border-bottom: 2px solid var(--accent-color-5);
 
         @media only screen and (min-width: $breakpoint-sm-min) {
             flex-direction: row;
diff --git a/test/jest/__tests__/antelope/stores/utils/store-utils.spec.ts b/test/jest/__tests__/antelope/stores/utils/store-utils.spec.ts
deleted file mode 100644
index 6283d4103..000000000
--- a/test/jest/__tests__/antelope/stores/utils/store-utils.spec.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { debounceAsync } from 'src/antelope/stores/utils/store-utils';
-
-describe('debounceAsync', () => {
-    let asyncMethodCallCounter = 0;
-    let synchronousMethodCallCounter = 0;
-    const returnValue = 'resolved';
-
-    // this method represents an async method, like a network request, which will be called from within
-    // a function we want to debounce, such as a store action which fetches data
-    function someAsyncMethod(param: string): Promise<string> {
-        return new Promise((resolve) => {
-            asyncMethodCallCounter++;
-            resolve(returnValue.concat(param));
-        });
-    }
-
-    // this method represents a synchronous method, like a getter, which will be called from within
-    // a function we want to debounce, such as a store getter which returns data
-    function someNonAsyncMethod(param: string): string {
-        synchronousMethodCallCounter++;
-        return returnValue.concat(param);
-    }
-
-    beforeAll(() => {
-        jest.useFakeTimers();
-    });
-
-    afterEach(() => {
-        jest.clearAllTimers();
-        asyncMethodCallCounter = 0;
-    });
-
-    afterAll(() => {
-        jest.useRealTimers();
-    });
-
-    it('should throw an error if the wait time is not a positive integer', () => {
-        const errorMessage = 'Invalid wait time. Wait time must be a positive integer.';
-        expect(() => debounceAsync(someAsyncMethod, -1)).toThrow(errorMessage);
-        expect(() => debounceAsync(someAsyncMethod, 0)).toThrow(errorMessage);
-        expect(() => debounceAsync(someAsyncMethod, 1.5)).toThrow(errorMessage);
-    });
-
-    it('should prevent a function from being called more than once within the specified timeframe', async () => {
-        const debouncedMethod = debounceAsync(someAsyncMethod, 1000);
-
-        // this is the first call to the debounced method; this call should be debounced (i.e. the async method should not be called)
-        // because the second call below to the debounced method is made within the specified timeframe
-        const firstCall = debouncedMethod('one');
-
-        // advance timer by 100ms, which is still within the specified debounce timeframe
-        // so, the async method should have been called yet
-        jest.advanceTimersByTime(100);
-        expect(asyncMethodCallCounter).toBe(0);
-
-        // this is the second call to the debounced method; this call should also be debounced (i.e. the async method should not be called)
-        const secondCall = debouncedMethod('two');
-        jest.advanceTimersByTime(100);
-        expect(asyncMethodCallCounter).toBe(0);
-
-        // this call will be the last one before the debounce timeframe expires, so the async method should be called 1000ms after it is called
-        const thirdCall = debouncedMethod('three');
-        jest.advanceTimersByTime(100);
-        // 1000ms have not yet passed, so the async method should not have been called yet
-        expect(asyncMethodCallCounter).toBe(0);
-
-        jest.advanceTimersByTime(1000);
-        // 1000ms have passed, so the async method should have been called once
-        expect(asyncMethodCallCounter).toBe(1);
-
-        // ultimately, all of the promises should resolve to the same value - the value passed to the last call to the debounced method
-        expect(await firstCall).toBe(returnValue.concat('three'));
-        expect(await secondCall).toBe(returnValue.concat('three'));
-        expect(await thirdCall).toBe(returnValue.concat('three'));
-    });
-
-    it('should return correctly even if the function provided is not asynchronous', async () => {
-        const debouncedMethod = debounceAsync(someNonAsyncMethod, 1000);
-        const firstCall = debouncedMethod('one');
-        jest.advanceTimersByTime(100);
-
-        // the synchronous method should not have been called yet, because the debounce timeframe has not yet expired
-        expect(synchronousMethodCallCounter).toBe(0);
-
-        const secondCall = debouncedMethod('two');
-        jest.advanceTimersByTime(100);
-        // the synchronous method should not have been called yet, because the debounce timeframe has not yet expired
-        expect(synchronousMethodCallCounter).toBe(0);
-
-        jest.advanceTimersByTime(3000);
-        // the synchronous method should have been called once, because the debounce timeframe has expired
-        expect(synchronousMethodCallCounter).toBe(1);
-
-        expect(await firstCall).toBe(returnValue.concat('two'));
-        expect(await secondCall).toBe(returnValue.concat('two'));
-    });
-
-    it('should properly handle the "this" context of the caller', async () => {
-        const ID = '123';
-        const testObject = {
-            id: ID,
-            debouncedMethod: debounceAsync(async function (this: { id: string }, str: string) {
-                return this.id.concat(str);
-            }, 1000),
-        };
-
-        const firstCall = testObject.debouncedMethod('abc');
-        jest.advanceTimersByTime(100);
-        const secondCall = testObject.debouncedMethod('xyz');
-        jest.advanceTimersByTime(3000);
-
-        expect(await firstCall).toBe(ID.concat('xyz'));
-        expect(await secondCall).toBe(ID.concat('xyz'));
-    });
-});
diff --git a/test/jest/__tests__/components/evm/AddressQR.spec.ts b/test/jest/__tests__/components/evm/AddressQR.spec.ts
index b050269a4..90c24a551 100644
--- a/test/jest/__tests__/components/evm/AddressQR.spec.ts
+++ b/test/jest/__tests__/components/evm/AddressQR.spec.ts
@@ -24,7 +24,7 @@ describe('AddressQR.vue', () => {
         global: {
             mocks: {
                 $style: {
-                    '--header-bg-color': BACKGROUND_COLOR,
+                    '--accent-color-5': BACKGROUND_COLOR,
                 },
             },
         },

From 3ccbb32653758ffb8de21cf1a382e75a31086c9c Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Thu, 7 Sep 2023 14:49:56 -0400
Subject: [PATCH 126/268] finish todos

---
 src/antelope/chains/EVMChainSettings.ts | 4 ++--
 src/antelope/stores/history.ts          | 4 +---
 src/antelope/stores/nfts.ts             | 3 +--
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index e0ecb4667..14fc09932 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -378,7 +378,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     }
 
     async getEVMTransactions(filter: IndexerTransactionsFilter): Promise<IndexerAccountTransactionsResponse> {
-        const address = '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607'; // eztodo undo
+        const address = filter.address;
         const limit = filter.limit;
         const offset = filter.offset;
         const includeAbi = filter.includeAbi;
@@ -460,7 +460,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
         }
 
         const params = aux as AxiosRequestConfig;
-        const url = 'v1/account/0x13B745FC35b0BAC9bab9fD20B7C9f46668232607/transfers'; // eztodo revert address
+        const url = `v1/account/${account}/transfers`;
 
         return this.indexer.get(url, { params })
             .then(response => response.data as IndexerAccountTransfersResponse);
diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 36a18c6be..d2bf1c466 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -254,9 +254,7 @@ export const useHistoryStore = defineStore(store_name, {
 
             const transactionShapePromises = transactions.map(async (tx) => {
                 const erc20Transfers = await contractStore.getErc20TransfersFromTransaction(tx);
-                // const userAddressLower = this.__evm_filter.address.toLowerCase();
-                // eztodo revert, note this location in the testing notes
-                const userAddressLower = '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607'.toLowerCase();
+                const userAddressLower = this.__evm_filter.address.toLowerCase();
 
                 const gasUsedInTlosBn = BigNumber.from(tx.gasPrice).mul(tx.gasused);
                 const gasUsedInTlos = getGasInTlos(tx.gasused, tx.gasPrice);
diff --git a/src/antelope/stores/nfts.ts b/src/antelope/stores/nfts.ts
index bdaaaca4c..85208e670 100644
--- a/src/antelope/stores/nfts.ts
+++ b/src/antelope/stores/nfts.ts
@@ -132,8 +132,7 @@ export const useNftsStore = defineStore(store_name, {
                 return;
             }
 
-            // eztodo revert
-            const owner = '0x13B745FC35b0BAC9bab9fD20B7C9f46668232607';
+            const owner = account.account;
 
             // we initialize the inventory for this label or take the existing one
             this.__inventory[label] = this.__inventory[label] || {

From 621568bb0a0559278a95bafb9324eb896cbab040 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Thu, 7 Sep 2023 14:56:33 -0400
Subject: [PATCH 127/268] cleanup

---
 src/antelope/stores/nfts.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/antelope/stores/nfts.ts b/src/antelope/stores/nfts.ts
index b50076e54..3a8d2e75f 100644
--- a/src/antelope/stores/nfts.ts
+++ b/src/antelope/stores/nfts.ts
@@ -5,7 +5,7 @@
 
 import { defineStore } from 'pinia';
 
-import { Label, Network, Address, IndexerTransactionsFilter, NFTClass, ERC721_TYPE, NftTokenInterface } from 'src/antelope/types';
+import { Label, Network, Address, IndexerTransactionsFilter, NFTClass, NftTokenInterface } from 'src/antelope/types';
 
 import { useFeedbackStore, getAntelope, useChainStore, useEVMStore, CURRENT_CONTEXT } from 'src/antelope';
 import { createTraceFunction, isTracingAll } from 'src/antelope/stores/feedback';

From 1a90f33dde6b61e431c8e1a4265f00e820586ef6 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Thu, 7 Sep 2023 15:05:05 -0400
Subject: [PATCH 128/268] uncomment tests

---
 src/pages/evm/wallet/WalletTransactionRow.vue |   4 +-
 .../evm/wallet/WalletTransactionRow.spec.ts   | 332 +++++++++---------
 .../WalletTransactionRow.spec.ts.snap         |  96 ++++-
 3 files changed, 253 insertions(+), 179 deletions(-)

diff --git a/src/pages/evm/wallet/WalletTransactionRow.vue b/src/pages/evm/wallet/WalletTransactionRow.vue
index 0d6b9c3cd..91ec038cb 100644
--- a/src/pages/evm/wallet/WalletTransactionRow.vue
+++ b/src/pages/evm/wallet/WalletTransactionRow.vue
@@ -3,7 +3,7 @@ import { defineComponent, PropType } from 'vue';
 import InlineSvg from 'vue-inline-svg';
 
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
-import { useChainStore, useNftsStore, useUserStore } from 'src/antelope';
+import { CURRENT_CONTEXT, useChainStore, useNftsStore, useUserStore } from 'src/antelope';
 import { NFTClass, ShapedTransactionRow } from 'src/antelope/types';
 
 import { getLongDate } from 'src/antelope/stores/utils';
@@ -289,7 +289,7 @@ export default defineComponent({
             >
                 <span>-{{ nftTransfer.quantity }}</span>
                 <NftViewer
-                    :nft="getCachedNftData(nftTransfer.collectionAddress, nftTransfer.tokenId) as NFTClass"
+                    :nft="getCachedNftData(nftTransfer.collectionAddress, nftTransfer.tokenId)"
                     :previewMode="false"
                     :tileMode="false"
                 />
diff --git a/test/jest/__tests__/pages/evm/wallet/WalletTransactionRow.spec.ts b/test/jest/__tests__/pages/evm/wallet/WalletTransactionRow.spec.ts
index 712c7ccc9..38976350b 100644
--- a/test/jest/__tests__/pages/evm/wallet/WalletTransactionRow.spec.ts
+++ b/test/jest/__tests__/pages/evm/wallet/WalletTransactionRow.spec.ts
@@ -1,165 +1,167 @@
-// import { shallowMount } from '@vue/test-utils';
-// import { stubWithSlot } from 'test/jest/testing-helpers';
-
-// const fakeExplorerUrl = 'example.com';
-// const locale = 'en-US';
-// const currency = 'USD';
-
-// const antelopeMock = {
-//     useChainStore: () => ({
-//         currentChain: {
-//             settings: {
-//                 getExplorerUrl: () => fakeExplorerUrl,
-//                 getSystemToken: () => ({
-//                     symbol: 'TLOS',
-//                 }),
-//             },
-//         },
-//     }),
-//     useUserStore: () => ({
-//         fiatLocale: locale,
-//         fiatCurrency: currency,
-//     }),
-// };
-
-// import WalletTransactionRow from 'pages/evm/wallet/WalletTransactionRow.vue';
-// import { ShapedTransactionRow } from 'src/antelope/types';
-
-// jest.mock('src/antelope', () => antelopeMock);
-
-
-// describe('WalletTransactionRow.vue', () => {
-//     const fakeDateSeconds = 1681775186;
-
-//     beforeAll(() => {
-//         // used so that timestamp text is the same for each test run, not depending on the day it is run
-//         jest.useFakeTimers('modern').setSystemTime(new Date(fakeDateSeconds * 1000));
-//     });
-
-//     afterAll(() => {
-//         jest.useRealTimers();
-//     });
-
-//     const defaultTxData: ShapedTransactionRow = {
-//         id: '0x'.concat('1'.repeat(40)),
-//         epoch: fakeDateSeconds,
-//         actionName: '',
-//         from: '0x'.concat('1'.repeat(40)),
-//         fromPrettyName: '',
-//         to: '0x'.concat('2'.repeat(40)),
-//         toPrettyName: '',
-//         valuesIn: [],
-//         valuesOut: [],
-//         gasUsed: 0.15,
-//         gasFiatValue: 0.03,
-//     };
-
-//     function getMountOptions(tx: ShapedTransactionRow, isMobile: boolean) {
-//         return {
-//             global: {
-//                 mocks: {
-//                     $q: {
-//                         screen: {
-//                             lt: {
-//                                 sm: isMobile,
-//                             },
-//                             gt: {
-//                                 xs: !isMobile,
-//                             },
-//                         },
-//                     },
-//                 },
-//                 stubs: {
-//                     'q-icon': stubWithSlot('q-icon'),
-//                 },
-//             },
-//             props: {
-//                 transaction: tx,
-//             },
-//         };
-//     }
-
-//     function runExpects(tx: ShapedTransactionRow) {
-//         const mobileWrapper = shallowMount(WalletTransactionRow, getMountOptions(tx, true));
-//         const desktopWrapper = shallowMount(WalletTransactionRow, getMountOptions(tx, true));
-
-//         expect(mobileWrapper.element).toMatchSnapshot();
-//         expect(desktopWrapper.element).toMatchSnapshot();
-//     }
-
-
-//     it('should have the right name', () => {
-//         expect(WalletTransactionRow.name).toBe('WalletTransactionRow');
-//     });
-
-//     describe('row should be rendered correctly for', () => {
-//         test('failed transactions', () => {
-//             const tx = {
-//                 ...defaultTxData,
-//                 failed: true,
-//             };
-
-//             runExpects(tx);
-//         });
-
-//         test('addresses with an alias', () => {
-//             const sendTx = {
-//                 ...defaultTxData,
-//                 actionName: 'send',
-//                 toPrettyName: 'SomeContract',
-//             };
-
-//             const otherTx= {
-//                 ...defaultTxData,
-//                 actionName: 'receive',
-//                 fromPrettyName: 'AContract',
-//             };
-
-//             runExpects(sendTx);
-//             runExpects(otherTx);
-//         });
-
-//         test('transfers with no fiat price', () => {
-//             const tx = {
-//                 ...defaultTxData,
-//                 actionName: 'swap',
-//                 toPrettyName: 'SomeContract',
-//                 valuesIn: [{
-//                     amount: 100.54121,
-//                     symbol: 'NERD',
-//                 }, {
-//                     amount: 357542547.674235,
-//                     symbol: 'SHIB',
-//                 }, {
-//                     amount: 1307.45,
-//                     symbol: 'TLOS',
-//                     fiatValue: 54.45123513,
-//                 }],
-//                 valuesOut: [{
-//                     amount: 100,
-//                     symbol: 'sTLOS',
-//                     fiatValue: 100,
-//                 }],
-//             };
-
-//             runExpects(tx);
-//         });
-
-//         test('transactions with an action name other than send/receive/swap', () => {
-//             const tx = {
-//                 ...defaultTxData,
-//                 actionName: 'approve',
-//             };
-
-//             runExpects(tx);
-//         });
-
-//         test('transactions with no known method name', () => {
-//             const tx = {
-//                 ...defaultTxData,
-//             };
-
-//             runExpects(tx);
-//         });
-//     });
-// });
+import { shallowMount } from '@vue/test-utils';
+import { stubWithSlot } from 'test/jest/testing-helpers';
+
+const fakeExplorerUrl = 'example.com';
+const locale = 'en-US';
+const currency = 'USD';
+
+const antelopeMock = {
+    useChainStore: () => ({
+        currentChain: {
+            settings: {
+                getExplorerUrl: () => fakeExplorerUrl,
+                getSystemToken: () => ({
+                    symbol: 'TLOS',
+                }),
+            },
+        },
+    }),
+    useUserStore: () => ({
+        fiatLocale: locale,
+        fiatCurrency: currency,
+    }),
+};
+
+import WalletTransactionRow from 'pages/evm/wallet/WalletTransactionRow.vue';
+import { ShapedTransactionRow } from 'src/antelope/types';
+
+jest.mock('src/antelope', () => antelopeMock);
+
+
+describe('WalletTransactionRow.vue', () => {
+    const fakeDateSeconds = 1681775186;
+
+    beforeAll(() => {
+        // used so that timestamp text is the same for each test run, not depending on the day it is run
+        jest.useFakeTimers('modern').setSystemTime(new Date(fakeDateSeconds * 1000));
+    });
+
+    afterAll(() => {
+        jest.useRealTimers();
+    });
+
+    const defaultTxData: ShapedTransactionRow = {
+        id: '0x'.concat('1'.repeat(40)),
+        epoch: fakeDateSeconds,
+        actionName: '',
+        from: '0x'.concat('1'.repeat(40)),
+        fromPrettyName: '',
+        to: '0x'.concat('2'.repeat(40)),
+        toPrettyName: '',
+        valuesIn: [],
+        valuesOut: [],
+        nftsIn: [],
+        nftsOut: [],
+        gasUsed: 0.15,
+        gasFiatValue: 0.03,
+    };
+
+    function getMountOptions(tx: ShapedTransactionRow, isMobile: boolean) {
+        return {
+            global: {
+                mocks: {
+                    $q: {
+                        screen: {
+                            lt: {
+                                sm: isMobile,
+                            },
+                            gt: {
+                                xs: !isMobile,
+                            },
+                        },
+                    },
+                },
+                stubs: {
+                    'q-icon': stubWithSlot('q-icon'),
+                },
+            },
+            props: {
+                transaction: tx,
+            },
+        };
+    }
+
+    function runExpects(tx: ShapedTransactionRow) {
+        const mobileWrapper = shallowMount(WalletTransactionRow, getMountOptions(tx, true));
+        const desktopWrapper = shallowMount(WalletTransactionRow, getMountOptions(tx, true));
+
+        expect(mobileWrapper.element).toMatchSnapshot();
+        expect(desktopWrapper.element).toMatchSnapshot();
+    }
+
+
+    it('should have the right name', () => {
+        expect(WalletTransactionRow.name).toBe('WalletTransactionRow');
+    });
+
+    describe('row should be rendered correctly for', () => {
+        test('failed transactions', () => {
+            const tx = {
+                ...defaultTxData,
+                failed: true,
+            };
+
+            runExpects(tx);
+        });
+
+        test('addresses with an alias', () => {
+            const sendTx = {
+                ...defaultTxData,
+                actionName: 'send',
+                toPrettyName: 'SomeContract',
+            };
+
+            const otherTx= {
+                ...defaultTxData,
+                actionName: 'receive',
+                fromPrettyName: 'AContract',
+            };
+
+            runExpects(sendTx);
+            runExpects(otherTx);
+        });
+
+        test('transfers with no fiat price', () => {
+            const tx = {
+                ...defaultTxData,
+                actionName: 'swap',
+                toPrettyName: 'SomeContract',
+                valuesIn: [{
+                    amount: 100.54121,
+                    symbol: 'NERD',
+                }, {
+                    amount: 357542547.674235,
+                    symbol: 'SHIB',
+                }, {
+                    amount: 1307.45,
+                    symbol: 'TLOS',
+                    fiatValue: 54.45123513,
+                }],
+                valuesOut: [{
+                    amount: 100,
+                    symbol: 'sTLOS',
+                    fiatValue: 100,
+                }],
+            };
+
+            runExpects(tx);
+        });
+
+        test('transactions with an action name other than send/receive/swap', () => {
+            const tx = {
+                ...defaultTxData,
+                actionName: 'approve',
+            };
+
+            runExpects(tx);
+        });
+
+        test('transactions with no known method name', () => {
+            const tx = {
+                ...defaultTxData,
+            };
+
+            runExpects(tx);
+        });
+    });
+});
diff --git a/test/jest/__tests__/pages/evm/wallet/__snapshots__/WalletTransactionRow.spec.ts.snap b/test/jest/__tests__/pages/evm/wallet/__snapshots__/WalletTransactionRow.spec.ts.snap
index 5f67b026f..76a8814f1 100644
--- a/test/jest/__tests__/pages/evm/wallet/__snapshots__/WalletTransactionRow.spec.ts.snap
+++ b/test/jest/__tests__/pages/evm/wallet/__snapshots__/WalletTransactionRow.spec.ts.snap
@@ -19,7 +19,9 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for addresses
         transformsource="[Function]"
       />
     </div>
-    <div>
+    <div
+      class="c-transaction-row__interaction-text-container"
+    >
       <div
         class="c-transaction-row__primary-interaction-text"
       >
@@ -60,6 +62,10 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for addresses
     
     
     
+    
+    
+    
+    
   </div>
   <div
     class="c-transaction-row__info-container c-transaction-row__info-container--third"
@@ -118,7 +124,9 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for addresses
         transformsource="[Function]"
       />
     </div>
-    <div>
+    <div
+      class="c-transaction-row__interaction-text-container"
+    >
       <div
         class="c-transaction-row__primary-interaction-text"
       >
@@ -159,6 +167,10 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for addresses
     
     
     
+    
+    
+    
+    
   </div>
   <div
     class="c-transaction-row__info-container c-transaction-row__info-container--third"
@@ -217,7 +229,9 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for addresses
         transformsource="[Function]"
       />
     </div>
-    <div>
+    <div
+      class="c-transaction-row__interaction-text-container"
+    >
       <div
         class="c-transaction-row__primary-interaction-text"
       >
@@ -258,6 +272,10 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for addresses
     
     
     
+    
+    
+    
+    
   </div>
   <div
     class="c-transaction-row__info-container c-transaction-row__info-container--third"
@@ -316,7 +334,9 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for addresses
         transformsource="[Function]"
       />
     </div>
-    <div>
+    <div
+      class="c-transaction-row__interaction-text-container"
+    >
       <div
         class="c-transaction-row__primary-interaction-text"
       >
@@ -357,6 +377,10 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for addresses
     
     
     
+    
+    
+    
+    
   </div>
   <div
     class="c-transaction-row__info-container c-transaction-row__info-container--third"
@@ -415,7 +439,9 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for failed tr
         transformsource="[Function]"
       />
     </div>
-    <div>
+    <div
+      class="c-transaction-row__interaction-text-container"
+    >
       <div
         class="c-transaction-row__primary-interaction-text"
       >
@@ -444,6 +470,10 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for failed tr
     
     
     
+    
+    
+    
+    
   </div>
   <div
     class="c-transaction-row__info-container c-transaction-row__info-container--third"
@@ -502,7 +532,9 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for failed tr
         transformsource="[Function]"
       />
     </div>
-    <div>
+    <div
+      class="c-transaction-row__interaction-text-container"
+    >
       <div
         class="c-transaction-row__primary-interaction-text"
       >
@@ -531,6 +563,10 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for failed tr
     
     
     
+    
+    
+    
+    
   </div>
   <div
     class="c-transaction-row__info-container c-transaction-row__info-container--third"
@@ -589,7 +625,9 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transacti
         transformsource="[Function]"
       />
     </div>
-    <div>
+    <div
+      class="c-transaction-row__interaction-text-container"
+    >
       <div
         class="c-transaction-row__primary-interaction-text"
       >
@@ -626,6 +664,10 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transacti
     
     
     
+    
+    
+    
+    
   </div>
   <div
     class="c-transaction-row__info-container c-transaction-row__info-container--third"
@@ -684,7 +726,9 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transacti
         transformsource="[Function]"
       />
     </div>
-    <div>
+    <div
+      class="c-transaction-row__interaction-text-container"
+    >
       <div
         class="c-transaction-row__primary-interaction-text"
       >
@@ -721,6 +765,10 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transacti
     
     
     
+    
+    
+    
+    
   </div>
   <div
     class="c-transaction-row__info-container c-transaction-row__info-container--third"
@@ -779,7 +827,9 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transacti
         transformsource="[Function]"
       />
     </div>
-    <div>
+    <div
+      class="c-transaction-row__interaction-text-container"
+    >
       <div
         class="c-transaction-row__primary-interaction-text"
       >
@@ -816,6 +866,10 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transacti
     
     
     
+    
+    
+    
+    
   </div>
   <div
     class="c-transaction-row__info-container c-transaction-row__info-container--third"
@@ -874,7 +928,9 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transacti
         transformsource="[Function]"
       />
     </div>
-    <div>
+    <div
+      class="c-transaction-row__interaction-text-container"
+    >
       <div
         class="c-transaction-row__primary-interaction-text"
       >
@@ -911,6 +967,10 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transacti
     
     
     
+    
+    
+    
+    
   </div>
   <div
     class="c-transaction-row__info-container c-transaction-row__info-container--third"
@@ -969,7 +1029,9 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transfers
         transformsource="[Function]"
       />
     </div>
-    <div>
+    <div
+      class="c-transaction-row__interaction-text-container"
+    >
       <div
         class="c-transaction-row__primary-interaction-text"
       >
@@ -1024,6 +1086,8 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transfers
     </div>
     
     
+    
+    
     <div
       class="c-transaction-row__value-container"
     >
@@ -1068,6 +1132,8 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transfers
       </span>
     </div>
     
+    
+    
   </div>
   <div
     class="c-transaction-row__info-container c-transaction-row__info-container--third"
@@ -1126,7 +1192,9 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transfers
         transformsource="[Function]"
       />
     </div>
-    <div>
+    <div
+      class="c-transaction-row__interaction-text-container"
+    >
       <div
         class="c-transaction-row__primary-interaction-text"
       >
@@ -1181,6 +1249,8 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transfers
     </div>
     
     
+    
+    
     <div
       class="c-transaction-row__value-container"
     >
@@ -1225,6 +1295,8 @@ exports[`WalletTransactionRow.vue row should be rendered correctly for transfers
       </span>
     </div>
     
+    
+    
   </div>
   <div
     class="c-transaction-row__info-container c-transaction-row__info-container--third"

From d00249676ae26e2a0bd96a43359ba37d2607703d Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Thu, 7 Sep 2023 18:25:35 -0400
Subject: [PATCH 129/268] route to nft detail page on click

---
 src/pages/evm/wallet/WalletTransactionRow.vue | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/pages/evm/wallet/WalletTransactionRow.vue b/src/pages/evm/wallet/WalletTransactionRow.vue
index 91ec038cb..f30687e2c 100644
--- a/src/pages/evm/wallet/WalletTransactionRow.vue
+++ b/src/pages/evm/wallet/WalletTransactionRow.vue
@@ -187,6 +187,15 @@ export default defineComponent({
         getCachedNftData(collectionAddress: string, tokenId: string): NFTClass {
             return this.nftData[`${collectionAddress.toLowerCase()}-${tokenId}`];
         },
+        goToNftDetailPage(collectionAddress: string, tokenId: string) {
+            this.$router.push({
+                name: 'evm-nft-details',
+                query: {
+                    contract: collectionAddress,
+                    id: tokenId,
+                },
+            });
+        },
     },
 });
 </script>
@@ -286,6 +295,11 @@ export default defineComponent({
             <div
                 v-if="getCachedNftData(nftTransfer.collectionAddress, nftTransfer.tokenId)"
                 class="c-transaction-row__nft c-transaction-row__nft--out"
+                role="link"
+                tabindex="0"
+                :aria-label="$t('nft.link_to_nft_details', { name: nftTransfer.tokenName })"
+                @click="goToNftDetailPage(nftTransfer.collectionAddress, nftTransfer.tokenId)"
+                @keypress.space.enter="goToNftDetailPage(nftTransfer.collectionAddress, nftTransfer.tokenId)"
             >
                 <span>-{{ nftTransfer.quantity }}</span>
                 <NftViewer
@@ -338,6 +352,11 @@ export default defineComponent({
             <div
                 v-if="getCachedNftData(nftTransfer.collectionAddress, nftTransfer.tokenId)"
                 class="c-transaction-row__nft c-transaction-row__nft--in"
+                role="link"
+                tabindex="0"
+                :aria-label="$t('nft.link_to_nft_details', { name: nftTransfer.tokenName })"
+                @click="goToNftDetailPage(nftTransfer.collectionAddress, nftTransfer.tokenId)"
+                @keypress.space.enter="goToNftDetailPage(nftTransfer.collectionAddress, nftTransfer.tokenId)"
             >
                 <span>+{{ nftTransfer.quantity }}</span>
 
@@ -597,6 +616,7 @@ export default defineComponent({
         gap: 8px;
         align-items: center;
         overflow: hidden;
+        cursor: pointer;
 
         &--out {
             color: var(--negative-color);

From 562b6de4938776334dfb91668e0632b83b59fcd3 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 19:38:17 -0300
Subject: [PATCH 130/268] save WIP - staking tab

---
 src/antelope/stores/rex.ts                    |  6 +-
 .../wallets/authenticators/OreIdAuth.ts       | 67 +++++++++++++++++++
 src/i18n/en-us/index.js                       |  4 --
 src/pages/evm/staking/StakingTab.vue          |  3 +-
 src/pages/evm/staking/UnstakingTab.vue        |  3 +-
 5 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index aa686e116..76096f5c4 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -16,7 +16,7 @@ import {
 import { AntelopeError, Label, TransactionResponse } from 'src/antelope/types';
 import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
-import { getAntelope, useBalancesStore, useChainStore, useEVMStore } from 'src/antelope';
+import { CURRENT_CONTEXT, getAntelope, useBalancesStore, useChainStore, useEVMStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION } from 'src/antelope/stores/utils';
 import { subscribeForTransactionReceipt } from 'src/antelope/stores/utils/trx-utils';
@@ -207,8 +207,8 @@ export const useRexStore = defineStore(store_name, {
             subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
                 this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
                 if (receipt.status === 1) {
-                    this.updateRexDataForAccount('logged', account);
-                    useBalancesStore().updateBalancesForAccount('logged', account);
+                    this.updateRexDataForAccount(CURRENT_CONTEXT, account);
+                    useBalancesStore().updateBalancesForAccount(CURRENT_CONTEXT, account);
                 }
                 return receipt;
             });
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index 49e01ab93..2b061ddee 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -406,3 +406,70 @@ export class OreIdAuth extends EVMAuthenticator {
     }
 
 }
+
+/*
+-- Documentations --
+
+---
+sidebar_positon: 4
+hide_table_of_contents: true
+title: Reading data from a Contract
+---
+
+# Reading data from a Contract
+
+## Interacting
+
+On EVM the ontracts may hold data in a private way, which means is not accesible to the public. However, the contracts may have public methods that allow to read the data. These methods are called `view` or `pure` methods. The `view` methods are the ones that read data from the blockchain, while the `pure` methods are the ones that do not read data from the blockchain. Both methods are free to use and do not require any signing.
+
+In order execute a read function, you need to instantiate a contract object and call the method you want to execute. In this chapter we will show how to read the `balanceOf` method from the `ERC20` contract using JsonRpcProvider as the provider for remote access to the blockchain.
+
+### Create the web3 provider
+
+First, we need to create a web3 provider. In this example we will use the `JsonRpcProvider` as the provider for remote access to the blockchain.
+
+```typescript
+async web3Provider(): Promise<ethers.providers.Web3Provider> {
+    const RPC_ENDPOINT = {
+        protocol: 'https',
+        host: 'mainnet.telos.net',
+        port: 443,
+        path: '/evm',
+    };
+    const url = `${RPC_ENDPOINT.protocol}://${RPC_ENDPOINT.host}:${RPC_ENDPOINT.port}${RPC_ENDPOINT.path ?? ''}`;
+    const web3Provider = new ethers.providers.JsonRpcProvider(url);
+    await web3Provider.ready;
+    return web3Provider as ethers.providers.Web3Provider;
+}
+```
+
+### Create the contract object
+
+Then, we need to create a contract object. In this example we will use the `ERC20` contract.
+
+```typescript
+const provider = await this.web3Provider();
+// you don't need the whole ABI, just the methods you want to call
+const erc20Abi = [
+    'function balanceOf(address account) view returns (uint256)',
+];
+const erc20Contract = new ethers.Contract(token, erc20Abi, provider);
+```
+
+### Call the method
+
+Finally, we need to call the method. In this example we will call the `balanceOf` method.
+
+```typescript
+const balance: ethers.BigNumber = await erc20Contract.balanceOf(address);
+
+// you can convert the balance to a number using the ethers.utils.formatUnits method
+const tokenDecimals = 18;
+const balanceNumber: number = ethers.utils.formatUnits(balance, tokenDecimals);
+```
+
+## Conclusion
+
+In this chapter we have shown how to read data from a contract using the `view` methods, prforming a remote call to the blockchain endpoint through the `JsonRpcProvider` provider. You can execute any `view` or `pure` method from any contract using the same approach. All you need is a provider and the contract ABI.
+
+*/
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 6d0a4f4a5..8dbb0ddfe 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -202,11 +202,7 @@ export default {
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
         withdrawable_card_label: 'withdrawable',
-<<<<<<< HEAD
         withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
-=======
-        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
->>>>>>> 958b7ab3 (addressing feedback)
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index 762cf3f90..a1475cfbb 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { ethers } from 'ethers';
 
 import {
+    CURRENT_CONTEXT,
     getAntelope,
     useAccountStore,
     useBalancesStore,
@@ -116,7 +117,7 @@ onBeforeMount(() => {
 });
 
 async function handleCtaClick() {
-    const label = 'logged';
+    const label = CURRENT_CONTEXT;
     if (!await accountStore.isConnectedToCorrectNetwork(label)) {
         const networkName = useChainStore().loggedChain.settings.getDisplay();
         const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index 59185d0bb..3761b6d03 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { ethers } from 'ethers';
 
 import {
+    CURRENT_CONTEXT,
     getAntelope,
     useAccountStore,
     useBalancesStore,
@@ -117,7 +118,7 @@ onBeforeMount(() => {
 });
 
 async function handleCtaClick() {
-    const label = 'logged';
+    const label = CURRENT_CONTEXT;
     if (!await accountStore.isConnectedToCorrectNetwork(label)) {
         const networkName = useChainStore().loggedChain.settings.getDisplay();
         const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });

From e0a0917ec352dbe085a1f78a93d52007cf37a9c3 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sun, 3 Sep 2023 14:21:36 -0300
Subject: [PATCH 131/268] removing console logs

---
 src/antelope/wallets/authenticators/InjectedProviderAuth.ts | 6 +++---
 src/components/ConversionRateBadge.vue                      | 1 -
 src/pages/evm/staking/StakingTab.vue                        | 6 +-----
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
index b9989004c..93d5e857c 100644
--- a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
+++ b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
@@ -83,7 +83,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
             const wethContract = new ethers.Contract(wrappedSystemTokenContractAddress, wtlosAbiDeposit, signer);
 
             if (!wethContract) {
-                console.log('wrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
+                this.trace('wrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
                 throw 'Unable to get wrapped system contract instance';
             }
             wrappedSystemTokenContractInstance = wethContract;
@@ -105,7 +105,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
     }
 
     async unwrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse> {
-        console.log('unwrapSystemToken', amount.toString());
+        this.trace('unwrapSystemToken', amount.toString());
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address;
         let wrappedSystemTokenContractInstance: ethers.Contract | undefined;
@@ -115,7 +115,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
             const wrappedSystemTokenContract = new ethers.Contract(wrappedSystemTokenContractAddress, wtlosAbiWithdraw, signer);
 
             if (!wrappedSystemTokenContract) {
-                console.log('unwrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
+                this.trace('unwrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
                 throw 'Unable to get wrapped system contract instance';
             }
             wrappedSystemTokenContractInstance = wrappedSystemTokenContract;
diff --git a/src/components/ConversionRateBadge.vue b/src/components/ConversionRateBadge.vue
index b74f4fc75..336ad75f0 100644
--- a/src/components/ConversionRateBadge.vue
+++ b/src/components/ConversionRateBadge.vue
@@ -18,7 +18,6 @@ const props = defineProps<{
 const fiatLocale = computed(() => userStore.fiatLocale);
 
 const label = computed(() => {
-    console.log('label computed: ', props.tokenOneSymbol, props.tokenTwoSymbol, props.tokenTwoAmount.toString(), fiatLocale.value, props.tokenTwoDecimals);
     const abbreviate = props.decimals === 0;
     const prettyTokenTwoAmount = prettyPrintCurrency(
         props.tokenTwoAmount,
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index a1475cfbb..c5481bdf8 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -42,16 +42,12 @@ const stakedTokenDecimals = stakedToken.decimals;
 const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
 const inputModelValue = ref(ethers.constants.Zero);
 const estimatedGas = ref(ethers.constants.Zero);
-const stakedRatio = computed(() => {
-    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
-    return chainStore.getStakedRatio(label);
-});
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
 const outputModelValue = computed(() => {
     if (stakedRatio.value.isZero()) {
         return ethers.constants.Zero;
     }
     const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
-    console.log('outputModelValue computed: ', output.toString());
     return output;
 });
 // computed

From c053f302e8c6570d382aa166a231d253895a1061 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sun, 3 Sep 2023 20:10:17 -0300
Subject: [PATCH 132/268] save WIP - adding for all EVMAuthenticators
 stake/unstake

---
 env.js                                        |   3 +-
 src/antelope/stores/utils/abi/wrapTlos.ts     |  31 +++
 src/antelope/stores/utils/trx-utils.ts        |   2 +
 .../wallets/authenticators/OreIdAuth.ts       | 188 +++++++++---------
 .../authenticators/WalletConnectAuth.ts       |  35 +++-
 5 files changed, 163 insertions(+), 96 deletions(-)

diff --git a/env.js b/env.js
index 6d267adee..7b0bd7194 100644
--- a/env.js
+++ b/env.js
@@ -22,7 +22,8 @@ const TESTNET = {
     HYPERION_ENDPOINT: 'https://testnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer-test.telos.net',
     CHAIN_NAME: 'telos-testnet',
-    APP_OREID_APP_ID: 't_75a4d9233ec441d18c4221e92b379197',
+    // APP_OREID_APP_ID: 't_75a4d9233ec441d18c4221e92b379197',
+    APP_OREID_APP_ID: 't_23991cde82994c88bb582c019a9c45e1',
 };
 
 const MAINNET = {
diff --git a/src/antelope/stores/utils/abi/wrapTlos.ts b/src/antelope/stores/utils/abi/wrapTlos.ts
index 01346414b..c86fee9b3 100644
--- a/src/antelope/stores/utils/abi/wrapTlos.ts
+++ b/src/antelope/stores/utils/abi/wrapTlos.ts
@@ -30,3 +30,34 @@ export const wtlosAbiWithdraw: EvmABI = [
         type: 'function',
     },
 ];
+
+export const stlosAbiDeposit: EvmABI = [
+    {
+        constant: false,
+        inputs: [],
+        name: 'depositTLOS',
+        outputs: [],
+        payable: true,
+        stateMutability: 'payable',
+        type: 'function',
+    },
+];
+
+export const stlosAbiWithdraw: EvmABI = [
+    {
+        constant: false,
+        inputs: [
+            {
+                indexed: false,
+                internalType: 'uint256',
+                name: 'wad',
+                type: 'uint256',
+            },
+        ],
+        name: 'withdrawTLOS',
+        outputs: [],
+        payable: false,
+        stateMutability: 'nonpayable',
+        type: 'function',
+    },
+];
diff --git a/src/antelope/stores/utils/trx-utils.ts b/src/antelope/stores/utils/trx-utils.ts
index 9d7305fa0..05dbe2633 100644
--- a/src/antelope/stores/utils/trx-utils.ts
+++ b/src/antelope/stores/utils/trx-utils.ts
@@ -13,6 +13,8 @@ export async function subscribeForTransactionReceipt(account: AccountModel, resp
         const provider = await authenticator.web3Provider();
         if (provider) {
             const whenConfirmed = provider.waitForTransaction(response.hash);
+            // TODO: remove this console error
+            console.error('subscribeForTransactionReceipt CONFIRMED!!', response.hash);
             // we add the wait method to the response,
             // so that the caller can subscribe to the confirmation event
             response.wait = async () => whenConfirmed;
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index 2b061ddee..d3c5e7933 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -1,7 +1,13 @@
 import { AuthProvider, ChainNetwork, OreId, OreIdOptions, JSONObject, UserChainAccount } from 'oreid-js';
 import { BigNumber, ethers } from 'ethers';
 import { WebPopup } from 'oreid-webpopup';
-import { erc20Abi, wtlosAbiDeposit, wtlosAbiWithdraw } from 'src/antelope/types';
+import {
+    erc20Abi,
+    stlosAbiDeposit,
+    stlosAbiWithdraw,
+    wtlosAbiDeposit,
+    wtlosAbiWithdraw,
+} from 'src/antelope/types';
 import { EVMAuthenticator } from 'src/antelope/wallets';
 import {
     AntelopeError,
@@ -190,27 +196,21 @@ export class OreIdAuth extends EVMAuthenticator {
 
     async transferTokens(token: TokenClass, amount: ethers.BigNumber, to: addressString): Promise<EvmTransactionResponse> {
         this.trace('transferTokens', token, amount, to);
+        this.checkIntegrity();
 
-        if (!this.userChainAccount) {
-            console.error('Inconsistency error: userChainAccount is null');
-            throw new AntelopeError('antelope.evm.error_no_provider');
-        }
-
-        if (!oreId) {
-            console.error('Inconsistency error: oreId is null');
-            throw new AntelopeError('antelope.evm.error_no_provider');
-        }
-
-        const from = this.userChainAccount.chainAccount as addressString;
+        // prepare variables
+        const from = this.userChainAccount?.chainAccount as addressString;
         const value = amount.toHexString();
         const abi = erc20Abi;
 
+        // transaction body: transfer system tokens
         const systemTransfer = {
             from,
             to,
             value,
         };
 
+        // transaction body: transfer erc20 tokens
         const erc20Transfer = {
             from,
             to: token.address,
@@ -228,10 +228,38 @@ export class OreIdAuth extends EVMAuthenticator {
             transactionBody = erc20Transfer;
         }
 
+        return this.performOreIdTransaction(from, transactionBody);
+    }
+
+    async prepareTokenForTransfer(token: TokenClass | null, amount: ethers.BigNumber, to: string): Promise<void> {
+        this.trace('prepareTokenForTransfer', [token], amount, to);
+    }
+
+    /**
+     * utility function to check if the user has a valid chain account and the oreId instance is initialized
+     */
+    checkIntegrity(): boolean {
+        if (!this.userChainAccount) {
+            console.error('Inconsistency error: userChainAccount is null');
+            throw new AntelopeError('antelope.evm.error_no_provider');
+        }
+
+        if (!oreId) {
+            console.error('Inconsistency error: oreId is null');
+            throw new AntelopeError('antelope.evm.error_no_provider');
+        }
+
+        return true;
+    }
+
+    async performOreIdTransaction(from: addressString, json: JSONObject): Promise<EvmTransactionResponse> {
+
+        const oreIdInstance = oreId as OreId;
+
         // sign a blockchain transaction
         this.trace('createTransaction()');
-        const transaction = await oreId.createTransaction({
-            transaction: transactionBody,
+        const transaction = await oreIdInstance.createTransaction({
+            transaction: json,
             chainAccount: from,
             chainNetwork: this.getChainNetwork(useChainStore().getChain(this.label).settings.getNetwork()),
             signOptions: {
@@ -243,7 +271,7 @@ export class OreIdAuth extends EVMAuthenticator {
         // have the user approve signature
         this.trace('Signing a transaction...', transaction);
 
-        const { transactionId } = await oreId.popup.sign({ transaction });
+        const { transactionId } = await oreIdInstance.popup.sign({ transaction });
         this.trace('transactionId:', transactionId);
 
         return {
@@ -252,30 +280,18 @@ export class OreIdAuth extends EVMAuthenticator {
         } as EvmTransactionResponse;
     }
 
-    async prepareTokenForTransfer(token: TokenClass | null, amount: ethers.BigNumber, to: string): Promise<void> {
-        this.trace('prepareTokenForTransfer', [token], amount, to);
-    }
-
     async wrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse> {
         this.trace('wrapSystemToken', amount);
+        this.checkIntegrity();
 
-        if (!this.userChainAccount) {
-            console.error('Inconsistency error: userChainAccount is null');
-            throw new AntelopeError('antelope.evm.error_no_provider');
-        }
-
-        if (!oreId) {
-            console.error('Inconsistency error: oreId is null');
-            throw new AntelopeError('antelope.evm.error_no_provider');
-        }
-
+        // prepare variables
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address as addressString;
-        const from = this.userChainAccount.chainAccount as addressString;
+        const from = this.userChainAccount?.chainAccount as addressString;
         const value = amount.toHexString();
         const abi = wtlosAbiDeposit;
 
-
+        // transaction body: wrap system token
         const wrapTransaction = {
             from,
             to: wrappedSystemTokenContractAddress,
@@ -287,50 +303,21 @@ export class OreIdAuth extends EVMAuthenticator {
             },
         } as unknown as JSONObject;
 
-        // sign a blockchain transaction
-        this.trace('createTransaction()');
-        const transaction = await oreId.createTransaction({
-            transaction: wrapTransaction,
-            chainAccount: from,
-            chainNetwork: this.getChainNetwork(useChainStore().getChain(this.label).settings.getNetwork()),
-            signOptions: {
-                broadcast: true,
-                returnSignedTransaction: true,
-            },
-        });
-
-        // have the user approve signature
-        this.trace('Signing a transaction...', transaction);
-
-        const { transactionId } = await oreId.popup.sign({ transaction });
-        this.trace('transactionId:', transactionId);
-
-        return {
-            hash: transactionId,
-            wait: async () => Promise.resolve({} as ethers.providers.TransactionReceipt),
-        } as EvmTransactionResponse;
-
+        return this.performOreIdTransaction(from, wrapTransaction);
     }
 
     async unwrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse> {
         this.trace('unwrapSystemToken', amount.toString());
+        this.checkIntegrity();
 
-        if (!this.userChainAccount) {
-            console.error('Inconsistency error: userChainAccount is null');
-            throw new AntelopeError('antelope.evm.error_no_provider');
-        }
-
-        if (!oreId) {
-            console.error('Inconsistency error: oreId is null');
-            throw new AntelopeError('antelope.evm.error_no_provider');
-        }
-
+        // prepare variables
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address as addressString;
-        const from = this.userChainAccount.chainAccount as addressString;
+        const from = this.userChainAccount?.chainAccount as addressString;
         const value = amount.toHexString();
         const abi = wtlosAbiWithdraw;
 
+        // transaction body: unwrap system token
         const unwrapTransaction = {
             from,
             to: wrappedSystemTokenContractAddress,
@@ -341,40 +328,59 @@ export class OreIdAuth extends EVMAuthenticator {
             },
         } as unknown as JSONObject;
 
-        // sign a blockchain transaction
-        this.trace('createTransaction()');
-        const transaction = await oreId.createTransaction({
-            transaction: unwrapTransaction,
-            chainAccount: from,
-            chainNetwork: this.getChainNetwork(useChainStore().getChain(this.label).settings.getNetwork()),
-            signOptions: {
-                broadcast: true,
-                returnSignedTransaction: true,
-            },
-        });
-
-        // have the user approve signature
-        this.trace('Signing a transaction...', transaction);
-
-        const { transactionId } = await oreId.popup.sign({ transaction });
-        this.trace('transactionId:', transactionId);
-
-        return {
-            hash: transactionId,
-            wait: async () => Promise.resolve({} as ethers.providers.TransactionReceipt),
-        } as EvmTransactionResponse;
+        return this.performOreIdTransaction(from, unwrapTransaction);
     }
 
     async stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
-        // TODO: implement
         this.trace('stakeSystemTokens', amount.toString());
-        return Promise.resolve({} as EvmTransactionResponse);
+        this.checkIntegrity();
+
+        // prepare variables
+        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const systemTokenContractAddress = chainSettings.getSystemToken().address as addressString;
+        const from = this.userChainAccount?.chainAccount as addressString;
+        const value = amount.toHexString();
+        const abi = stlosAbiDeposit;
+
+        console.assert(stlosAbiDeposit.length === 1, 'warning: we are assuming stlosAbiDeposit has only one method');
+        // transaction body: stake system token
+        const stakeTransaction = {
+            from,
+            to: systemTokenContractAddress,
+            value,
+            'contract': {
+                abi,
+                'parameters': [],
+                'method': stlosAbiDeposit[0].name,
+            },
+        } as unknown as JSONObject;
+
+        return this.performOreIdTransaction(from, stakeTransaction);
     }
 
     async unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
-        // TODO: implement
         this.trace('unstakeSystemTokens', amount.toString());
-        return Promise.resolve({} as EvmTransactionResponse);
+        this.checkIntegrity();
+
+        // prepare variables
+        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const systemTokenContractAddress = chainSettings.getSystemToken().address as addressString;
+        const from = this.userChainAccount?.chainAccount as addressString;
+        const value = amount.toHexString();
+        const abi = stlosAbiWithdraw;
+
+        // transaction body: unstake system token
+        const unstakeTransaction = {
+            from,
+            to: systemTokenContractAddress,
+            'contract': {
+                abi,
+                'parameters': [value],
+                'method': 'withdraw',
+            },
+        } as unknown as JSONObject;
+
+        return this.performOreIdTransaction(from, unstakeTransaction);
     }
 
 
diff --git a/src/antelope/wallets/authenticators/WalletConnectAuth.ts b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
index aa8a5981d..8a3e2281a 100644
--- a/src/antelope/wallets/authenticators/WalletConnectAuth.ts
+++ b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
@@ -28,6 +28,8 @@ import {
     EvmABI,
     TokenClass,
     addressString,
+    stlosAbiDeposit,
+    stlosAbiWithdraw,
     wtlosAbiDeposit,
     wtlosAbiWithdraw,
 } from 'src/antelope/types';
@@ -338,6 +340,7 @@ export class WalletConnectAuth extends EVMAuthenticator {
     }
 
     async unwrapSystemToken(amount: BigNumber): Promise<WriteContractResult> {
+        this.trace('unwrapSystemToken', amount.toString());
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address as addressString;
 
@@ -354,15 +357,39 @@ export class WalletConnectAuth extends EVMAuthenticator {
     }
 
     async stakeSystemTokens(amount: BigNumber): Promise<WriteContractResult> {
-        // TODO: implement
         this.trace('stakeSystemTokens', amount.toString());
-        return Promise.resolve({} as WriteContractResult);
+        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const stakedSystemTokenContractAddress = chainSettings.getStakedSystemToken().address as addressString;
+
+        console.assert(stlosAbiDeposit.length === 1, 'warning: we are assuming stlosAbiDeposit has only one method');
+        const sendConfig = await prepareWriteContract({
+            chainId: +useChainStore().getChain(this.label).settings.getChainId(),
+            address: stakedSystemTokenContractAddress,
+            abi: stlosAbiDeposit,
+            functionName: stlosAbiDeposit[0].name,
+            args: [],
+            value: BigInt(amount.toString()),
+        });
+
+        return await writeContract(sendConfig);
     }
 
     async unstakeSystemTokens(amount: BigNumber): Promise<WriteContractResult> {
-        // TODO: implement
         this.trace('unstakeSystemTokens', amount.toString());
-        return Promise.resolve({} as WriteContractResult);
+        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const stakedSystemTokenContractAddress = chainSettings.getStakedSystemToken().address as addressString;
+
+        console.assert(stlosAbiWithdraw.length === 1, 'warning: we are assuming stlosAbiWithdraw has only one method');
+        const sendConfig = await prepareWriteContract({
+            chainId: +useChainStore().getChain(this.label).settings.getChainId(),
+            address: stakedSystemTokenContractAddress,
+            abi: stlosAbiWithdraw,
+            functionName: stlosAbiWithdraw[0].name,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            args: [amount] as any[],
+        });
+
+        return await writeContract(sendConfig);
     }
 
     async isConnectedTo(chainId: string): Promise<boolean> {

From 76918cf46325ef1df73fea6671362d716afcefe6 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 7 Sep 2023 10:19:31 -0300
Subject: [PATCH 133/268] Staking fully functional

---
 src/antelope/stores/account.ts                   | 1 +
 src/antelope/wallets/authenticators/OreIdAuth.ts | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index 94dcd3a59..7aef0ac51 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -279,6 +279,7 @@ export const useAccountStore = defineStore(store_name, {
             this.trace('isConnectedToCorrectNetwork', label);
             try {
                 useFeedbackStore().setLoading('account.isConnectedToCorrectNetwork');
+                console.log('label ---> ', label, useAccountStore().getAccount(label));
                 const authenticator = useAccountStore().getAccount(label)?.authenticator as EVMAuthenticator;
                 return authenticator.isConnectedToCorrectChain();
             } catch (error) {
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index d3c5e7933..4616cceba 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -337,7 +337,7 @@ export class OreIdAuth extends EVMAuthenticator {
 
         // prepare variables
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
-        const systemTokenContractAddress = chainSettings.getSystemToken().address as addressString;
+        const stakedSystemTokenContractAddress = chainSettings.getStakedSystemToken().address as addressString;
         const from = this.userChainAccount?.chainAccount as addressString;
         const value = amount.toHexString();
         const abi = stlosAbiDeposit;
@@ -346,7 +346,7 @@ export class OreIdAuth extends EVMAuthenticator {
         // transaction body: stake system token
         const stakeTransaction = {
             from,
-            to: systemTokenContractAddress,
+            to: stakedSystemTokenContractAddress,
             value,
             'contract': {
                 abi,
@@ -364,7 +364,7 @@ export class OreIdAuth extends EVMAuthenticator {
 
         // prepare variables
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
-        const systemTokenContractAddress = chainSettings.getSystemToken().address as addressString;
+        const stakedSystemTokenContractAddress = chainSettings.getStakedSystemToken().address as addressString;
         const from = this.userChainAccount?.chainAccount as addressString;
         const value = amount.toHexString();
         const abi = stlosAbiWithdraw;
@@ -372,7 +372,7 @@ export class OreIdAuth extends EVMAuthenticator {
         // transaction body: unstake system token
         const unstakeTransaction = {
             from,
-            to: systemTokenContractAddress,
+            to: stakedSystemTokenContractAddress,
             'contract': {
                 abi,
                 'parameters': [value],

From 1c3858fb77480123f6ce6abd81d49590443cd45e Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 8 Sep 2023 13:55:04 -0400
Subject: [PATCH 134/268] update method name

---
 src/antelope/stores/account.ts | 4 ++--
 src/antelope/stores/history.ts | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index 45b849e43..b4b033d6a 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -156,7 +156,7 @@ export const useAccountStore = defineStore(store_name, {
         async loginEVM({ authenticator, network }: LoginEVMActionData): Promise<boolean> {
             this.trace('loginEVM', network);
             useHistoryStore().clearEvmTransactions();
-            useHistoryStore().clearEVMTansfers();
+            useHistoryStore().clearEvmNftTransfers();
             useBalancesStore().clearBalances();
             useNftsStore().clearNFTs();
 
@@ -206,7 +206,7 @@ export const useAccountStore = defineStore(store_name, {
         async logout() {
             this.trace('logout');
             useHistoryStore().clearEvmTransactions();
-            useHistoryStore().clearEVMTansfers();
+            useHistoryStore().clearEvmNftTransfers();
             useBalancesStore().clearBalances();
             useNftsStore().clearNFTs();
 
diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 7ee707501..332930a1b 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -231,7 +231,7 @@ export const useHistoryStore = defineStore(store_name, {
 
                 this.setEVMTransfers(label, transfers);
             } catch (error) {
-                this.clearEVMTansfers();
+                this.clearEvmNftTransfers();
                 throw new AntelopeError('antelope.history.error_fetching_nft_transfers');
             } finally {
                 nftTransfersUpdated = (new Date()).getTime();
@@ -463,8 +463,8 @@ export const useHistoryStore = defineStore(store_name, {
             this.trace('setEVMTransfers', transfers);
             this.__evm_nft_transfers[label].transfers = transfers;
         },
-        clearEVMTansfers(): void {
-            this.trace('clearEVMTansfers');
+        clearEvmNftTransfers(): void {
+            this.trace('clearEvmNftTransfers');
             this.setEVMTransfers(CURRENT_CONTEXT, []);
         },
     },

From b6e73e9fd787d414e90a4cc206b4b8d74699fb11 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 8 Sep 2023 13:56:33 -0400
Subject: [PATCH 135/268] update getter name

---
 src/antelope/chains/EVMChainSettings.ts | 2 +-
 src/antelope/stores/history.ts          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 14fc09932..3e266a2cf 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -421,7 +421,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
             .then(response => response.data as IndexerAccountTransactionsResponse);
     }
 
-    async getEVMTransfers({
+    async getEvmNftTransfers({
         account,
         type,
         limit,
diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 332930a1b..1317dc31a 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -89,7 +89,7 @@ export const useHistoryStore = defineStore(store_name, {
         getShapedTransactionRows: state => (label: Label): ShapedTransactionRow[] => state.__shaped_evm_transaction_rows[label],
         getEVMTransactionsPagination: state => (label: Label): EVMTransactionsPaginationData => state.__evm_transactions_pagination_data[label],
         getEvmTransactionsRowCount: state => (label: Label): number => state.__total_evm_transaction_count[label],
-        getEVMTransfers: state => (label: Label): EvmTransfer[] => state.__evm_nft_transfers[label].transfers,
+        getEvmNftTransfers: state => (label: Label): EvmTransfer[] => state.__evm_nft_transfers[label].transfers,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -193,7 +193,7 @@ export const useHistoryStore = defineStore(store_name, {
                     erc721TransferResponse,
                     erc1155TransferResponse,
                 ] = await Promise.all(['erc721', 'erc1155'].map(
-                    type => chainSettings.getEVMTransfers({
+                    type => chainSettings.getEvmNftTransfers({
                         includePagination: true,
                         account,
                         limit: transfers_filter_limit,

From 2c3db4b44578cc3764880a0d307db27fe170af66 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 8 Sep 2023 13:59:36 -0400
Subject: [PATCH 136/268] update commit name

---
 src/antelope/stores/history.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 1317dc31a..69e0fe328 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -229,7 +229,7 @@ export const useHistoryStore = defineStore(store_name, {
                 // sort transfers from new to old
                 transfers.sort((a, b) => b.timestamp - a.timestamp);
 
-                this.setEVMTransfers(label, transfers);
+                this.setEvmNftTransfers(label, transfers);
             } catch (error) {
                 this.clearEvmNftTransfers();
                 throw new AntelopeError('antelope.history.error_fetching_nft_transfers');
@@ -459,13 +459,13 @@ export const useHistoryStore = defineStore(store_name, {
             this.setShapedTransactionRows(CURRENT_CONTEXT, []);
             this.setEvmTransactionsRowCount(CURRENT_CONTEXT, 0);
         },
-        setEVMTransfers(label: Label, transfers: EvmTransfer[]): void {
-            this.trace('setEVMTransfers', transfers);
+        setEvmNftTransfers(label: Label, transfers: EvmTransfer[]): void {
+            this.trace('setEvmNftTransfers', transfers);
             this.__evm_nft_transfers[label].transfers = transfers;
         },
         clearEvmNftTransfers(): void {
             this.trace('clearEvmNftTransfers');
-            this.setEVMTransfers(CURRENT_CONTEXT, []);
+            this.setEvmNftTransfers(CURRENT_CONTEXT, []);
         },
     },
 });

From 8ed76ddc67b793422f10987ae004cccfcd5f416c Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 8 Sep 2023 15:37:45 -0300
Subject: [PATCH 137/268] adding some try-catchs and othe minor refactors

---
 src/antelope/stores/account.ts                |   1 -
 src/antelope/stores/balances.ts               |  81 ++++++------
 .../wallets/authenticators/OreIdAuth.ts       | 121 +++++-------------
 src/pages/evm/staking/StakingTab.vue          |   2 +-
 src/pages/evm/staking/UnstakingTab.vue        |   6 +-
 5 files changed, 71 insertions(+), 140 deletions(-)

diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index 7aef0ac51..94dcd3a59 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -279,7 +279,6 @@ export const useAccountStore = defineStore(store_name, {
             this.trace('isConnectedToCorrectNetwork', label);
             try {
                 useFeedbackStore().setLoading('account.isConnectedToCorrectNetwork');
-                console.log('label ---> ', label, useAccountStore().getAccount(label));
                 const authenticator = useAccountStore().getAccount(label)?.authenticator as EVMAuthenticator;
                 return authenticator.isConnectedToCorrectChain();
             } catch (error) {
diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index f36f60c97..cff914f50 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -35,7 +35,6 @@ import {
     useFeedbackStore,
     useChainStore,
     useEVMStore,
-    usePlatformStore,
     CURRENT_CONTEXT,
 } from 'src/antelope';
 import { formatWei } from 'src/antelope/stores/utils';
@@ -72,20 +71,23 @@ export const useBalancesStore = defineStore(store_name, {
     actions: {
         trace: createTraceFunction(store_name),
         init: () => {
+            const balanceStore = useBalancesStore();
             useFeedbackStore().setDebug(store_name, isTracingAll());
             getAntelope().events.onAccountChanged.pipe(
                 filter(({ label, account }) => !!label && !!account),
             ).subscribe({
                 next: async ({ label, account }) => {
                     if (label === CURRENT_CONTEXT) {
-                        await useBalancesStore().updateBalancesForAccount(label, toRaw(account));
+                        await balanceStore.updateBalancesForAccount(label, toRaw(account));
                     }
                 },
             });
 
             // update logged balances every 10 seconds
             setInterval(async () => {
-                await useBalancesStore().updateBalancesForAccount(CURRENT_CONTEXT, useAccountStore().loggedAccount);
+                if (balanceStore.__balances[CURRENT_CONTEXT]) {
+                    await balanceStore.updateBalancesForAccount(CURRENT_CONTEXT, useAccountStore().loggedAccount);
+                }
             }, 10000);
         },
         async updateBalances(label: string) {
@@ -226,14 +228,21 @@ export const useBalancesStore = defineStore(store_name, {
             }
         },
         async updateSystemBalanceForAccount(label: string, address: addressString): Promise<void> {
-            this.trace('updateSystemBalanceForAccount', label, address);
-            const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
-            const sys_token = chain_settings.getSystemToken();
-            const price = (await chain_settings.getUsdPrice()).toString();
-            const marketInfo = { price } as MarketSourceInfo;
-            sys_token.market = new TokenMarketData(marketInfo);
-            const balanceBn = await useAccountStore().getEVMAuthenticator(label)?.getSystemTokenBalance(address);
-            this.processBalanceForToken(label, sys_token, balanceBn);
+            try {
+                this.trace('updateSystemBalanceForAccount', label, address);
+                const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
+                const sys_token = chain_settings.getSystemToken();
+                const price = (await chain_settings.getUsdPrice()).toString();
+                const marketInfo = { price } as MarketSourceInfo;
+                sys_token.market = new TokenMarketData(marketInfo);
+                const accountStore = useAccountStore();
+                const authenticator = accountStore.getEVMAuthenticator(label);
+                const balanceBn = await authenticator.getSystemTokenBalance(address);
+                this.processBalanceForToken(label, sys_token, balanceBn);
+            } catch (error) {
+                console.error(error);
+                throw getAntelope().config.wrapError('antelope.evm.error_update_system_balance_failed', error);
+            }
         },
         shouldAddTokenBalance(label: string, balanceBn: BigNumber, token: TokenClass): boolean {
             const importantTokens = useChainStore().getChain(label).settings.getSystemTokens();
@@ -248,44 +257,26 @@ export const useBalancesStore = defineStore(store_name, {
             return result;
         },
         processBalanceForToken(label: string, token: TokenClass, balanceBn: BigNumber): void {
-            const tokenBalance = new TokenBalance(token, balanceBn);
-            if (this.shouldAddTokenBalance(label, balanceBn, token)) {
-                this.addNewBalance(label, tokenBalance);
-            } else {
-                this.removeBalance(label, tokenBalance);
+            try {
+                const tokenBalance = new TokenBalance(token, balanceBn);
+                if (this.shouldAddTokenBalance(label, balanceBn, token)) {
+                    this.addNewBalance(label, tokenBalance);
+                } else {
+                    this.removeBalance(label, tokenBalance);
+                }
+            } catch (error) {
+                console.error(error, [label, token, balanceBn]);
             }
         },
         async subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<TransactionResponse> {
-            this.trace('subscribeForTransactionReceipt', response.hash);
-            if (account.isNative) {
-                throw new AntelopeError('Not implemented yet for native');
-            } else {
-                const authenticator = account.authenticator as EVMAuthenticator;
-                const provider = await authenticator.web3Provider();
-                if (provider) {
-                    // instead of await, we use then() to return the response immediately
-                    // and perform the balance update in the background
-                    const whenConfirmed = provider.waitForTransaction(response.hash).then((receipt: ethers.providers.TransactionReceipt) => {
-                        this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
-                        if (receipt.status === 1) {
-                            const account = useAccountStore().loggedAccount;
-                            if (account?.account) {
-                                this.updateBalancesForAccount(CURRENT_CONTEXT, account);
-                            }
-                        }
-                        return receipt;
-                    });
-                    // we add the wait method to the response,
-                    // so that the caller can subscribe to the confirmation event
-                    response.wait = async () => whenConfirmed;
-                } else {
-                    if (usePlatformStore().isMobile) {
-                        response.wait = async () => Promise.resolve({} as ethers.providers.TransactionReceipt);
-                    } else {
-                        throw new AntelopeError('antelope.evm.error_no_provider');
-                    }
+            this.trace('subscribeForTransactionReceipt', account.account, response.hash);
+            subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
+                this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
+                if (receipt.status === 1) {
+                    this.updateBalancesForAccount('logged', account);
                 }
-            }
+                return receipt;
+            });
             return response;
         },
         async prepareWagmiSystemTokenTransferConfig(label: Label, to: string, amount: bigint): Promise<void> {
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index 4616cceba..1ec405be3 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -174,23 +174,33 @@ export class OreIdAuth extends EVMAuthenticator {
 
     async getSystemTokenBalance(address: addressString | string): Promise<ethers.BigNumber> {
         this.trace('getSystemTokenBalance', address);
-        const provider = await this.web3Provider();
-        if (provider) {
-            return provider.getBalance(address);
-        } else {
-            throw new AntelopeError('antelope.evm.error_no_provider');
+        try {
+            const provider = await this.web3Provider();
+            if (provider) {
+                return provider.getBalance(address);
+            } else {
+                throw new AntelopeError('antelope.evm.error_no_provider');
+            }
+        } catch (e) {
+            console.error('getSystemTokenBalance', e, address);
+            throw e;
         }
     }
 
     async getERC20TokenBalance(address: addressString, token: addressString): Promise<ethers.BigNumber> {
         this.trace('getERC20TokenBalance', [address, token]);
-        const provider = await this.web3Provider();
-        if (provider) {
-            const erc20Contract = new ethers.Contract(token, erc20Abi, provider);
-            const balance = await erc20Contract.balanceOf(address);
-            return balance;
-        } else {
-            throw new AntelopeError('antelope.evm.error_no_provider');
+        try {
+            const provider = await this.web3Provider();
+            if (provider) {
+                const erc20Contract = new ethers.Contract(token, erc20Abi, provider);
+                const balance = await erc20Contract.balanceOf(address);
+                return balance;
+            } else {
+                throw new AntelopeError('antelope.evm.error_no_provider');
+            }
+        } catch (e) {
+            console.error('getERC20TokenBalance', e, address, token);
+            throw e;
         }
     }
 
@@ -257,7 +267,6 @@ export class OreIdAuth extends EVMAuthenticator {
         const oreIdInstance = oreId as OreId;
 
         // sign a blockchain transaction
-        this.trace('createTransaction()');
         const transaction = await oreIdInstance.createTransaction({
             transaction: json,
             chainAccount: from,
@@ -269,10 +278,7 @@ export class OreIdAuth extends EVMAuthenticator {
         });
 
         // have the user approve signature
-        this.trace('Signing a transaction...', transaction);
-
         const { transactionId } = await oreIdInstance.popup.sign({ transaction });
-        this.trace('transactionId:', transactionId);
 
         return {
             hash: transactionId,
@@ -391,11 +397,17 @@ export class OreIdAuth extends EVMAuthenticator {
 
     async web3Provider(): Promise<ethers.providers.Web3Provider> {
         this.trace('web3Provider');
-        const p:RpcEndpoint = (useChainStore().getChain(this.label).settings as EVMChainSettings).getRPCEndpoint();
-        const url = `${p.protocol}://${p.host}:${p.port}${p.path ?? ''}`;
-        const web3Provider = new ethers.providers.JsonRpcProvider(url);
-        await web3Provider.ready;
-        return web3Provider as ethers.providers.Web3Provider;
+        try {
+            const p:RpcEndpoint = (useChainStore().getChain(this.label).settings as EVMChainSettings).getRPCEndpoint();
+            const url = `${p.protocol}://${p.host}:${p.port}${p.path ?? ''}`;
+            const jsonRpcProvider = new ethers.providers.JsonRpcProvider(url);
+            await jsonRpcProvider.ready;
+            const web3Provider = jsonRpcProvider as ethers.providers.Web3Provider;
+            return web3Provider;
+        } catch (e) {
+            console.error('web3Provider', e);
+            throw e;
+        }
     }
 
     async externalProvider(): Promise<ethers.providers.ExternalProvider> {
@@ -412,70 +424,3 @@ export class OreIdAuth extends EVMAuthenticator {
     }
 
 }
-
-/*
--- Documentations --
-
----
-sidebar_positon: 4
-hide_table_of_contents: true
-title: Reading data from a Contract
----
-
-# Reading data from a Contract
-
-## Interacting
-
-On EVM the ontracts may hold data in a private way, which means is not accesible to the public. However, the contracts may have public methods that allow to read the data. These methods are called `view` or `pure` methods. The `view` methods are the ones that read data from the blockchain, while the `pure` methods are the ones that do not read data from the blockchain. Both methods are free to use and do not require any signing.
-
-In order execute a read function, you need to instantiate a contract object and call the method you want to execute. In this chapter we will show how to read the `balanceOf` method from the `ERC20` contract using JsonRpcProvider as the provider for remote access to the blockchain.
-
-### Create the web3 provider
-
-First, we need to create a web3 provider. In this example we will use the `JsonRpcProvider` as the provider for remote access to the blockchain.
-
-```typescript
-async web3Provider(): Promise<ethers.providers.Web3Provider> {
-    const RPC_ENDPOINT = {
-        protocol: 'https',
-        host: 'mainnet.telos.net',
-        port: 443,
-        path: '/evm',
-    };
-    const url = `${RPC_ENDPOINT.protocol}://${RPC_ENDPOINT.host}:${RPC_ENDPOINT.port}${RPC_ENDPOINT.path ?? ''}`;
-    const web3Provider = new ethers.providers.JsonRpcProvider(url);
-    await web3Provider.ready;
-    return web3Provider as ethers.providers.Web3Provider;
-}
-```
-
-### Create the contract object
-
-Then, we need to create a contract object. In this example we will use the `ERC20` contract.
-
-```typescript
-const provider = await this.web3Provider();
-// you don't need the whole ABI, just the methods you want to call
-const erc20Abi = [
-    'function balanceOf(address account) view returns (uint256)',
-];
-const erc20Contract = new ethers.Contract(token, erc20Abi, provider);
-```
-
-### Call the method
-
-Finally, we need to call the method. In this example we will call the `balanceOf` method.
-
-```typescript
-const balance: ethers.BigNumber = await erc20Contract.balanceOf(address);
-
-// you can convert the balance to a number using the ethers.utils.formatUnits method
-const tokenDecimals = 18;
-const balanceNumber: number = ethers.utils.formatUnits(balance, tokenDecimals);
-```
-
-## Conclusion
-
-In this chapter we have shown how to read data from a contract using the `view` methods, prforming a remote call to the blockchain endpoint through the `JsonRpcProvider` provider. You can execute any `view` or `pure` method from any contract using the same approach. All you need is a provider and the contract ABI.
-
-*/
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index c5481bdf8..0935270f8 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -97,7 +97,7 @@ const availableTostake = computed(() => {
     return available;
 });
 const formIsValid = computed(() =>
-    !inputModelValue.value.isZero() &&
+    !outputModelValue.value.isZero() &&
     inputModelValue.value.lt(availableTostake.value),
 );
 const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeEVMSystemTokens'));
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index 3761b6d03..f5bb4593e 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -43,16 +43,12 @@ const stakedTokenDecimals = stakedToken.decimals;
 const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
 const inputModelValue = ref(ethers.constants.Zero);
 const estimatedGas = ref(ethers.constants.Zero);
-const stakedRatio = computed(() => {
-    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
-    return chainStore.getStakedRatio(label);
-});
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
 const outputModelValue = computed(() => {
     if (stakedRatio.value.isZero()) {
         return ethers.constants.Zero;
     }
     const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
-    console.log('outputModelValue computed: ', output.toString());
     return output;
 });
 // computed

From c2e1790840cf7522dca4e2a31ca487136cb2a7be Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 8 Sep 2023 15:49:01 -0300
Subject: [PATCH 138/268] fixing "logged" label bug

---
 src/antelope/stores/balances.ts      | 2 +-
 src/antelope/stores/rex.ts           | 6 +++---
 src/pages/evm/staking/StakingTab.vue | 3 ++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index cff914f50..86333b41d 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -273,7 +273,7 @@ export const useBalancesStore = defineStore(store_name, {
             subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
                 this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
                 if (receipt.status === 1) {
-                    this.updateBalancesForAccount('logged', account);
+                    this.updateBalancesForAccount(CURRENT_CONTEXT, account);
                 }
                 return receipt;
             });
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index aa686e116..76096f5c4 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -16,7 +16,7 @@ import {
 import { AntelopeError, Label, TransactionResponse } from 'src/antelope/types';
 import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
-import { getAntelope, useBalancesStore, useChainStore, useEVMStore } from 'src/antelope';
+import { CURRENT_CONTEXT, getAntelope, useBalancesStore, useChainStore, useEVMStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION } from 'src/antelope/stores/utils';
 import { subscribeForTransactionReceipt } from 'src/antelope/stores/utils/trx-utils';
@@ -207,8 +207,8 @@ export const useRexStore = defineStore(store_name, {
             subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
                 this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
                 if (receipt.status === 1) {
-                    this.updateRexDataForAccount('logged', account);
-                    useBalancesStore().updateBalancesForAccount('logged', account);
+                    this.updateRexDataForAccount(CURRENT_CONTEXT, account);
+                    useBalancesStore().updateBalancesForAccount(CURRENT_CONTEXT, account);
                 }
                 return receipt;
             });
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index d8f6c194c..c5481bdf8 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { ethers } from 'ethers';
 
 import {
+    CURRENT_CONTEXT,
     getAntelope,
     useAccountStore,
     useBalancesStore,
@@ -112,7 +113,7 @@ onBeforeMount(() => {
 });
 
 async function handleCtaClick() {
-    const label = 'logged';
+    const label = CURRENT_CONTEXT;
     if (!await accountStore.isConnectedToCorrectNetwork(label)) {
         const networkName = useChainStore().loggedChain.settings.getDisplay();
         const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });

From 060f68b1ef73854d82f3e0d36548bfa328738f32 Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Fri, 8 Sep 2023 14:38:19 -0500
Subject: [PATCH 139/268] feat(wip): add ual support for oreid cloud wallet

fix: console error
---
 env.js                       |  2 ++
 package.json                 |  3 +-
 src/boot/ual.js              |  7 +++++
 src/store/account/actions.js |  2 +-
 yarn.lock                    | 60 +++++++++++++++++++++---------------
 5 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/env.js b/env.js
index 6d267adee..21f0175da 100644
--- a/env.js
+++ b/env.js
@@ -22,6 +22,7 @@ const TESTNET = {
     HYPERION_ENDPOINT: 'https://testnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer-test.telos.net',
     CHAIN_NAME: 'telos-testnet',
+    APP_OREID_APP_ID_NATIVE: 't_a61e9926d5204387a9ac113dfce7cbc5',
     APP_OREID_APP_ID: 't_75a4d9233ec441d18c4221e92b379197',
 };
 
@@ -37,6 +38,7 @@ const MAINNET = {
     NETWORK_EXPLORER: 'https://explorer.telos.net',
     CHAIN_NAME: 'telos',
     APP_OREID_APP_ID: 'p_e5b81fcc20a04339993b0cc80df7e3fd',
+    APP_OREID_APP_ID_NATIVE: 'p_751f87258d5b40998b55c626d612fd4e', // @TODO replace with main net production ID
 };
 
 const env = process.env.NETWORK === 'mainnet' ? MAINNET : TESTNET;
diff --git a/package.json b/package.json
index 62d87ff85..e79df8c97 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "node-polyfill-webpack-plugin": "^2.0.1",
     "numeral": "^2.0.6",
     "oreid-js": "^4.7.1",
-    "oreid-webpopup": "^2.3.0",
+    "oreid-webpopup": "^2.4.0",
     "pinia": "^2.0.33",
     "ptokens": "^0.14.0",
     "qrcanvas-vue": "^3.0.0",
@@ -47,6 +47,7 @@
     "rxjs": "^7.8.0",
     "ual-anchor": "^1.1.2",
     "ual-ledger": "^0.3.0",
+    "ual-oreid": "^1.0.0",
     "ual-wombat": "^0.3.3",
     "universal-authenticator-library": "^0.3.0",
     "vue": "3",
diff --git a/src/boot/ual.js b/src/boot/ual.js
index e663b2f45..a7cafc329 100644
--- a/src/boot/ual.js
+++ b/src/boot/ual.js
@@ -3,6 +3,8 @@ import { UAL } from 'universal-authenticator-library';
 import { Anchor } from 'ual-anchor';
 import { Wombat } from 'ual-wombat';
 import { CleosAuthenticator } from '@telosnetwork/ual-cleos';
+import { WebPopup } from 'oreid-webpopup';
+import { OreIdAuthenticator, AuthProvider } from 'ual-oreid';
 import { Dialog, Notify, copyToClipboard } from 'quasar';
 
 
@@ -147,6 +149,11 @@ export default boot(async ({ app, store }) => {
             loginHandler,
             signHandler,
         }),
+        new OreIdAuthenticator([chain], {
+            appId: process.env.APP_OREID_APP_ID_NATIVE,
+            plugins: { popup: WebPopup() },
+        },
+        AuthProvider.Google),
     ];
 
     const ual = new UAL([chain], 'ual', authenticators);
diff --git a/src/store/account/actions.js b/src/store/account/actions.js
index 109a8f110..65f6d52db 100644
--- a/src/store/account/actions.js
+++ b/src/store/account/actions.js
@@ -41,7 +41,7 @@ export const login = async function(
             e.message ||
             e.reason;
         commit('general/setErrorMsg', error, { root: true });
-        console.erorr('Login error: ', error);
+        console.error('Login error: ', error);
     } finally {
         commit('setLoadingWallet');
     }
diff --git a/yarn.lock b/yarn.lock
index f29aac449..182eb14b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6709,11 +6709,6 @@ erc-20-abi@^1.0.0:
   resolved "https://registry.yarnpkg.com/erc-20-abi/-/erc-20-abi-1.0.0.tgz#3df0f24458f902cade72f615c532b3b50d18beaf"
   integrity sha512-X+kdxwbfegJ5quNHVyJPf72Y8g+rpurR3vA+K2b4jVUuAl3qHMYxnR7ZOJRC/T7kQu3V8XU4/U4mIJ+w5wUaeQ==
 
-err-code@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
-  integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -10952,6 +10947,26 @@ ora@^5.4.1:
     strip-ansi "^6.0.0"
     wcwidth "^1.0.1"
 
+oreid-js@^4.4.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/oreid-js/-/oreid-js-4.7.2.tgz#398d22f25e622b79f85f0f915cb4118ba1ad2dff"
+  integrity sha512-w6T5+KShDVd6ZonNZnjmyZGuUm6yhAGjkpKiLVY7xPCH8iu3bQyBHW1gayk+QG2JSwt5JGixuLQ7se2f6gbqHA==
+  dependencies:
+    "@aikon/eos-transit" "^4.0.9"
+    "@msgpack/msgpack" "^2.7.2"
+    "@types/express" "^4.17.8"
+    axios "^0.26.0"
+    canonicalize "^1.0.8"
+    crypto-js "^4.1.1"
+    dotenv "^8.6.0"
+    js-base64 "^3.7.2"
+    js-cookie "^2.2.1"
+    jwt-decode "^2.2.0"
+    require-from-url "^3.1.3"
+    semver "^6.3.0"
+    universal-authenticator-library "^0.3.0"
+    uuid "^7.0.3"
+
 oreid-js@^4.7.1:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/oreid-js/-/oreid-js-4.7.1.tgz#6190637ed3a82e228e3530259199c0855bfa5c52"
@@ -10972,13 +10987,12 @@ oreid-js@^4.7.1:
     universal-authenticator-library "^0.3.0"
     uuid "^7.0.3"
 
-oreid-webpopup@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/oreid-webpopup/-/oreid-webpopup-2.3.0.tgz#6defec8cc40e8651bb82a6e1898fc8250daec2ef"
-  integrity sha512-BjDxtQvtdqh8Sh5FVit0V/WgZngrJ9/7JLoOm724Ozv+Bp5NweGWpBUHmUOJUN2jDZwA51l4ptjfHL99TQJ+sQ==
+oreid-webpopup@^2.1.2, oreid-webpopup@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/oreid-webpopup/-/oreid-webpopup-2.4.0.tgz#71226ea172b48b5903c4b0094ae63cd2253c1a51"
+  integrity sha512-Tv/7Nvx7uwq8O8CNpfw1PY8azuGNGDzk8awhuV4NNQOE061c/9cJZczqo21XImdrPqzVIQdbeeqBEEARUm5c3Q==
   dependencies:
     js-base64 "^3.7.2"
-    promise-retry "^2.0.1"
 
 os-browserify@^0.3.0:
   version "0.3.0"
@@ -11647,14 +11661,6 @@ promise-polyfill@^8.1.3:
   resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63"
   integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==
 
-promise-retry@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/promise-retry/-/promise-retry-2.0.1.tgz#ff747a13620ab57ba688f5fc67855410c370da22"
-  integrity sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==
-  dependencies:
-    err-code "^2.0.2"
-    retry "^0.12.0"
-
 prompts@^2.0.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
@@ -12224,7 +12230,7 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.2:
+regenerator-runtime@^0.13.10, regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.2:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
@@ -12444,11 +12450,6 @@ ret@~0.1.10:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
-retry@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
-  integrity sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==
-
 retry@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
@@ -13941,6 +13942,17 @@ ual-ledger@^0.3.0:
     eosjs-ledger-signature-provider "0.1.2"
     universal-authenticator-library "0.3.0"
 
+ual-oreid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ual-oreid/-/ual-oreid-1.0.0.tgz#196ea643bc2c6ab5d08350e1fc2f988a55fb14d6"
+  integrity sha512-PXsSYmvBoi24NghyWf9zNV1siYCq6/vhN0ErZs/tHH3aUjyXhWjkBCtTfuEFWJ2VMPA2wrnSQ+bE8GpGdfFEHA==
+  dependencies:
+    eosjs "^22.1.0"
+    oreid-js "^4.4.2"
+    oreid-webpopup "^2.1.2"
+    regenerator-runtime "^0.13.10"
+    universal-authenticator-library "^0.3.0"
+
 ual-wombat@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/ual-wombat/-/ual-wombat-0.3.3.tgz#18eeb6195f4e380ba9d36b452395b8f79cf2cbaa"

From dd7e9c6a3923eca4f28b60f78ef15ea2ed1127ab Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 8 Sep 2023 16:51:31 -0300
Subject: [PATCH 140/268] restoring testing app_id

---
 env.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/env.js b/env.js
index 7b0bd7194..6d267adee 100644
--- a/env.js
+++ b/env.js
@@ -22,8 +22,7 @@ const TESTNET = {
     HYPERION_ENDPOINT: 'https://testnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer-test.telos.net',
     CHAIN_NAME: 'telos-testnet',
-    // APP_OREID_APP_ID: 't_75a4d9233ec441d18c4221e92b379197',
-    APP_OREID_APP_ID: 't_23991cde82994c88bb582c019a9c45e1',
+    APP_OREID_APP_ID: 't_75a4d9233ec441d18c4221e92b379197',
 };
 
 const MAINNET = {

From f3448b209d1fc772757a0b45994bacedb9e6d7fa Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Fri, 8 Sep 2023 16:09:25 -0500
Subject: [PATCH 141/268] fix: add broadcast option for ore id transactions

---
 src/boot/api.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/boot/api.js b/src/boot/api.js
index ef0c0d8f7..044f1bc41 100644
--- a/src/boot/api.js
+++ b/src/boot/api.js
@@ -21,6 +21,7 @@ const signTransaction = async function (actions, detail = null) {
                     actions,
                 },
                 {
+                    broadcast: true,
                     blocksBehind: 3,
                     expireSeconds: 30,
                 },

From 944ca23ad4bfecf739c015893bd0ed842e204760 Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Fri, 8 Sep 2023 17:25:53 -0500
Subject: [PATCH 142/268] refactor: oreid env var

---
 env.js               | 8 ++++----
 src/boot/antelope.ts | 2 +-
 src/boot/ual.js      | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/env.js b/env.js
index 21f0175da..620227534 100644
--- a/env.js
+++ b/env.js
@@ -22,8 +22,8 @@ const TESTNET = {
     HYPERION_ENDPOINT: 'https://testnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer-test.telos.net',
     CHAIN_NAME: 'telos-testnet',
-    APP_OREID_APP_ID_NATIVE: 't_a61e9926d5204387a9ac113dfce7cbc5',
-    APP_OREID_APP_ID: 't_75a4d9233ec441d18c4221e92b379197',
+    OREID_APP_ID: 't_75a4d9233ec441d18c4221e92b379197',
+    OREID_APP_ID_NATIVE: 't_a61e9926d5204387a9ac113dfce7cbc5',
 };
 
 const MAINNET = {
@@ -37,8 +37,8 @@ const MAINNET = {
     HYPERION_ENDPOINT: 'https://mainnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer.telos.net',
     CHAIN_NAME: 'telos',
-    APP_OREID_APP_ID: 'p_e5b81fcc20a04339993b0cc80df7e3fd',
-    APP_OREID_APP_ID_NATIVE: 'p_751f87258d5b40998b55c626d612fd4e', // @TODO replace with main net production ID
+    OREID_APP_ID: 'p_e5b81fcc20a04339993b0cc80df7e3fd',
+    OREID_APP_ID_NATIVE: 'p_751f87258d5b40998b55c626d612fd4e',
 };
 
 const env = process.env.NETWORK === 'mainnet' ? MAINNET : TESTNET;
diff --git a/src/boot/antelope.ts b/src/boot/antelope.ts
index 465045a46..2b546dab1 100644
--- a/src/boot/antelope.ts
+++ b/src/boot/antelope.ts
@@ -82,7 +82,7 @@ export default boot(({ app }) => {
     ant.wallets.addEVMAuthenticator(new SafePalAuth());
     const oreIdOptions: OreIdOptions = {
         appName: process.env.APP_NAME,
-        appId: process.env.APP_OREID_APP_ID as string,
+        appId: process.env.OREID_APP_ID as string,
     };
     ant.wallets.addEVMAuthenticator(new OreIdAuth(oreIdOptions));
 
diff --git a/src/boot/ual.js b/src/boot/ual.js
index a7cafc329..7271a10c6 100644
--- a/src/boot/ual.js
+++ b/src/boot/ual.js
@@ -150,7 +150,7 @@ export default boot(async ({ app, store }) => {
             signHandler,
         }),
         new OreIdAuthenticator([chain], {
-            appId: process.env.APP_OREID_APP_ID_NATIVE,
+            appId: process.env.OREID_APP_ID_NATIVE,
             plugins: { popup: WebPopup() },
         },
         AuthProvider.Google),

From 12787c243171937ecaf0e523c50288a5701304cc Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 16:00:26 -0300
Subject: [PATCH 143/268] WIP

---
 src/components/evm/AppNav.vue               |   1 -
 src/i18n/en-us/index.js                     |   7 +
 src/pages/evm/staking/StakingPage.vue       |  22 ++-
 src/pages/evm/staking/StakingPageHeader.vue | 149 ++++++++++++++++++++
 src/router/routes.js                        |  10 +-
 5 files changed, 169 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/evm/staking/StakingPageHeader.vue

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 479ff74ce..a8b47a003 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -261,7 +261,6 @@ export default defineComponent({
             </li>
 
             <li
-                v-if="false"
                 class="c-app-nav__menu-item"
                 role="menuitem"
                 :tabindex="menuItemTabIndex"
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 338de764f..057f973d3 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -189,6 +189,13 @@ export default {
         wrap_input_label: 'Wrapping Amount',
         unwrap_input_label: 'Unwrapping Amount',
     },
+    evm_stake: {
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        staked_card_label: 'Staked {symbol}',
+        staked_card_tooltip: 'Staked\n\n' +
+        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_tooltip: 'Unstaking',
+    },
     notification:{
         success_title_trx: 'Success',
         success_title_copied: 'Copied',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index c7e321c75..e5ac5b327 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -1,24 +1,14 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script setup lang="ts">
 import AppPage from 'components/evm/AppPage.vue';
+import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
 
-export default defineComponent({
-    name: 'StakingPage',
-    components: {
-        AppPage,
-    },
-    data: () => ({
-        tabs: ['stake', 'unstake', 'withdraw'],
-    }),
-
-});
+const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
 
 <template>
 <AppPage :tabs="tabs">
     <template v-slot:header>
-        <p>stake page header stuff</p>
+        <StakingPageHeader />
     </template>
 
     <template v-slot:stake>
@@ -38,3 +28,7 @@ export default defineComponent({
 <style lang="scss">
 
 </style>
+
+
+
+
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
new file mode 100644
index 000000000..3beaa0d97
--- /dev/null
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BigNumber, ethers } from 'ethers';
+
+import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
+import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { NativeCurrencyAddress } from 'src/antelope/types';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+
+import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
+
+
+const { t: $t } = useI18n();
+const userStore = useUserStore();
+const balancesStore = useBalancesStore();
+const chainStore = useChainStore();
+const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
+// data
+const systemTokenPrice = ref(0); // always equal to wrapped token price
+const loading = ref(true);
+
+
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenName = computed(() => chainSettings.getSystemToken().name);
+const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
+const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
+
+const totalFiatValueText = ref('--');
+
+/*
+const totalFiatValueText = computed(() => {
+    if (loading.value) {
+        return '--';
+    }
+
+    const totalBalance = +totalSystemAndWrappedBalance.value;
+    const totalFiatValue = totalBalance * systemTokenPrice.value;
+
+    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
+});
+
+
+const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
+const allBalances = computed(() => balancesStore.loggedBalances);
+const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
+const wrappedTokenBalanceBn = computed(() =>
+    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
+);
+const totalSystemAndWrappedBalance = computed(() => {
+    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
+        return '0';
+    }
+    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
+
+    return formatWei(addedBn, WEI_PRECISION);
+});
+const totalBalanceUnitsText = computed(() => {
+    const systemSymbol = chainSettings.getSystemToken().symbol;
+    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+
+    return `${systemSymbol} + ${wrappedSymbol}`;
+});
+const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const wrappedFiatValueText = computed(() => prettyPrintCurrency(
+    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
+    2,
+    fiatLocale.value,
+    false,
+    fiatCurrency.value,
+    false,
+));
+const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
+*/
+
+const stakedFiatValueText = ref('--');
+const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
+const unstakingFiatValueText = ref('--');
+const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
+
+const cardData = computed(() => [{
+    label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    primaryText: stakedFiatValueText.value,
+    secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}, {
+    label: systemTokenSymbol.value,
+    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    primaryText: unstakingFiatValueText.value,
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: true,
+}]);
+
+
+// methods
+onBeforeMount(() => {
+    chainSettings.getUsdPrice().then((price) => {
+        systemTokenPrice.value = price;
+    }).finally(() => {
+        loading.value = false;
+    });
+});
+
+function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
+    return prettyPrintCurrency(
+        amount ?? BigNumber.from(0),
+        4,
+        fiatLocale.value,
+        false,
+        symbol,
+        false,
+        WEI_PRECISION,
+    );
+}
+</script>
+
+<template>
+<div class="c-staking-header">
+    <div class="text-center q-mb-xl">
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemTokenName }) }}</h5>
+        <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
+    </div>
+
+    <ScrollableInfoCards :cards="cardData" />
+</div>
+</template>
+
+<style lang="scss">
+.c-staking-header {
+    width: 100%;
+}
+</style>
diff --git a/src/router/routes.js b/src/router/routes.js
index 4d99cdc2c..2c700f75b 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -72,11 +72,11 @@ const routes = [
                 },
                 component: () => import('pages/evm/nfts/NftDetailsPage.vue'),
             },
-            // {
-            //     path: 'staking',
-            //     name: 'evm-staking',
-            //     component: () => import('pages/evm/staking/StakingPage.vue'),
-            // },
+            {
+                path: 'staking',
+                name: 'evm-staking',
+                component: () => import('pages/evm/staking/StakingPage.vue'),
+            },
             {
                 path: 'wrap',
                 name: 'evm-wrap',

From 459af63717ebd56464b1cb921043553247ab4548 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 144/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue               |  10 ++
 src/components/evm/ScrollableInfoCards.vue  |  14 ++-
 src/i18n/en-us/index.js                     |  31 +++++-
 src/pages/evm/staking/StakingPageHeader.vue | 111 +++++++++-----------
 4 files changed, 98 insertions(+), 68 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index a8b47a003..2be56ab14 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,6 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
+                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
             </li>
 
             <li
@@ -481,6 +482,15 @@ export default defineComponent({
         }
     }
 
+    &__apy-box {
+        @include text--small;
+        background-color: rgba(255, 255, 255, 0.1);
+        color: var(--bg-color);
+        padding: 4px 8px;
+        border-radius: 4px;
+        display: inline-block;
+    }
+
     &__icon {
         // svg color overrides
         &--current-route:not(#{$this}__icon--acorn) path {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 591334a9a..1b10f0552 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -8,13 +8,21 @@ const props = defineProps<{
         primaryText?: string;
         secondaryText?: string;
         lowContrastSecondaryText?: boolean;
+        useSmallBox?: boolean;
     }[];
 }>();
 </script>
 
 <template>
 <div class="c-scrollable-info-cards">
-    <div v-for="(card, index) in cards" :key="`card-${index}`" class="c-scrollable-info-cards__card">
+    <div
+        v-for="(card, index) in cards"
+        :key="`card-${index}`"
+        :class="{
+            'c-scrollable-info-cards__card': true,
+            'c-scrollable-info-cards__card--small': !!card.useSmallBox,
+        }"
+    >
         <div class="c-scrollable-info-cards__card-header">
             <h5 class="u-text--low-contrast">
                 {{ card.label }}
@@ -66,9 +74,11 @@ const props = defineProps<{
         border: 2px solid var(--header-item-outline-color);
         width: 220px;
         flex-shrink: 0;
-
         @include sm-and-up {
             width: 300px;
+            &--small {
+                width: 220px;
+            }
         }
     }
 
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 057f973d3..3de2c9501 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -192,9 +192,34 @@ export default {
     evm_stake: {
         total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
         staked_card_label: 'Staked {symbol}',
-        staked_card_tooltip: 'Staked\n\n' +
-        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
-        unstaking_card_tooltip: 'Unstaking',
+        staked_card_tooltip: 'Staked tokens:\n\n' +
+        'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
+        'This includes your {stakedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_label: 'Unstaking',
+        unstaking_card_tooltip: 'Unstaking tokens:\n\n' +
+        'This reflects the total value of locked {systemSymbol} in the process of unstaking.\n' +
+        'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
+        'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
+        'During this time you cannot interact with this {systemSymbol}.',
+        withdrawable_card_label: 'Withdraw-able',
+        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
+        'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
+        'you can withdraw your {systemSymbol} from escrow.',
+        apy_card_label: 'APY',
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
+        'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
+        'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
+        'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
+        unstaking_period_card_label: 'Unstaking Period',
+        unstaking_period_card_tooltip: 'Unstaking Period:\n\n' +
+        'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
+        'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
+        tvl_card_label: 'TVL',
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 3beaa0d97..52b4b682d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -29,83 +29,63 @@ const systemTokenName = computed(() => chainSettings.getSystemToken().name);
 const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
 const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
 
-const totalFiatValueText = ref('--');
+const totalFiatValueText = ref('$ 4,324.35');
 
-/*
-const totalFiatValueText = computed(() => {
-    if (loading.value) {
-        return '--';
-    }
-
-    const totalBalance = +totalSystemAndWrappedBalance.value;
-    const totalFiatValue = totalBalance * systemTokenPrice.value;
-
-    return prettyPrintCurrency(totalFiatValue, 2, fiatLocale.value, false, fiatCurrency.value, false);
-});
+const stakedFiatValueText = ref('$ 4,000.23');
+const stakedTokenBalanceBn = ref(ethers.utils.parseUnits('34021.230', WEI_PRECISION));
+const unstakingFiatValueText = ref('$ 200.72');
+const unstakingBalanceBn = ref(ethers.utils.parseUnits('1242.0312', WEI_PRECISION));
+const withdrawableFiatValueText = ref('$ 123.02');
+const withdrawableBalanceBn = ref(ethers.utils.parseUnits('245.0225', WEI_PRECISION));
 
+const apyPrittyPrint = ref('8.23%');
+const unlockPeriod = ref('10 days');
 
-const wrappedTokenSymbol = computed(() => chainSettings.getWrappedSystemToken().symbol);
-const allBalances = computed(() => balancesStore.loggedBalances);
-const systemTokenBalanceBn =  computed(() => allBalances.value.find(b => b.token.contract === NativeCurrencyAddress)?.balance);
-const wrappedTokenBalanceBn = computed(() =>
-    allBalances.value.find(b => b.token.contract === chainSettings.getWrappedSystemToken().address)?.balance,
-);
-const totalSystemAndWrappedBalance = computed(() => {
-    if (!systemTokenBalanceBn.value || !wrappedTokenBalanceBn.value) {
-        return '0';
-    }
-    const addedBn = systemTokenBalanceBn.value.add(wrappedTokenBalanceBn.value);
-
-    return formatWei(addedBn, WEI_PRECISION);
-});
-const totalBalanceUnitsText = computed(() => {
-    const systemSymbol = chainSettings.getSystemToken().symbol;
-    const wrappedSymbol = chainSettings.getWrappedSystemToken().symbol;
+// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
+const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
+const evmNetworkName = ref('Telos EVM');
 
-    return `${systemSymbol} + ${wrappedSymbol}`;
-});
-const unwrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(systemTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const wrappedFiatValueText = computed(() => prettyPrintCurrency(
-    +formatWei(wrappedTokenBalanceBn.value ?? BigNumber.from(0), WEI_PRECISION) * systemTokenPrice.value,
-    2,
-    fiatLocale.value,
-    false,
-    fiatCurrency.value,
-    false,
-));
-const prettySystemTokenFiatPrice = computed(() => prettyPrintCurrency(+systemTokenPrice.value, 2, fiatLocale.value, false, fiatCurrency.value, false));
-*/
-
-const stakedFiatValueText = ref('--');
-const stakedTokenBalanceBn = ref(ethers.BigNumber.from(0));
-const unstakingFiatValueText = ref('--');
-const unstakingBalanceBn = ref(ethers.BigNumber.from(0));
-
-const cardData = computed(() => [{
+const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
     tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
     primaryText: stakedFiatValueText.value,
     secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
+    label: $t('evm_stake.unstaking_card_label'),
+    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
     primaryText: unstakingFiatValueText.value,
     secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
 }, {
-    label: systemTokenSymbol.value,
-    tooltip: $t('evm_wrap.unstaking_card_tooltip'),
-    primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    label: $t('evm_stake.withdrawable_card_label'),
+    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    primaryText: withdrawableFiatValueText.value,
+    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemTokenSymbol.value),
     lowContrastSecondaryText: true,
+    useSmallBox: true,
+}]);
+
+const secondLineData = computed(() => [{
+    label: $t('evm_stake.apy_card_label', { symbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: apyPrittyPrint.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.unstaking_period_card_label'),
+    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: unlockPeriod.value,
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
+}, {
+    label: $t('evm_stake.tvl_card_label'),
+    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    secondaryText: prettyPrintToken(tvlAmountBn.value, systemTokenSymbol.value),
+    lowContrastSecondaryText: false,
+    useSmallBox: true,
 }]);
 
 
@@ -138,12 +118,17 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 
-    <ScrollableInfoCards :cards="cardData" />
+    <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
+    <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>
 </template>
 
 <style lang="scss">
 .c-staking-header {
     width: 100%;
+
+    &__cards-second-line {
+        margin-top: 24px;
+    }
 }
 </style>

From 443493473e88370f88be1c96344e5ef9d11b6b11 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 145/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3de2c9501..d20cab566 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From ed8b517d73239929a6b4c9ea1489eabe8f86fe67 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:10:04 -0400
Subject: [PATCH 146/268] use i18n for apy label

---
 src/components/evm/AppNav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 2be56ab14..9fb48b9c9 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,7 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
+                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
             </li>
 
             <li

From eb1ec37bcf14810d26da67302e7782e09cfd16a9 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 147/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index d20cab566..3de2c9501 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From afd45b2cdda2d214310c86ab28ecccf9be693196 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 148/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3de2c9501..d20cab566 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From e3d89b2f46b0ff3eb92431186e11bc1e4de441e2 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 149/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index d20cab566..3de2c9501 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 17aa620693c89d2723e9dcedcd3086bc6904de6e Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 150/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3de2c9501..d20cab566 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 6173bf892504b2fa55526fa1ccb5fbf5f6c547fd Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 151/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue | 4 ++++
 src/i18n/en-us/index.js       | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 9fb48b9c9..fe9b79a2b 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,7 +279,11 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
+<<<<<<< HEAD
                 <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
+=======
+                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
+>>>>>>> a8908111 (adding page header component for Staking Section)
             </li>
 
             <li
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index d20cab566..3de2c9501 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From bf76eb52a76c48b7c78cf5416e86fac811253a83 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:10:04 -0400
Subject: [PATCH 152/268] use i18n for apy label

---
 src/components/evm/AppNav.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index fe9b79a2b..9fb48b9c9 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -279,11 +279,7 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-<<<<<<< HEAD
                 <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
-=======
-                <span class="c-app-nav__apy-box"> APY <b>8.23%</b> </span>
->>>>>>> a8908111 (adding page header component for Staking Section)
             </li>
 
             <li

From f5ec75e5b4e66fa77b5cc2f21735d86ab7fb9d84 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 22 Aug 2023 16:38:41 -0300
Subject: [PATCH 153/268] saving WIP

---
 src/antelope/chains/EVMChainSettings.ts       | 47 ++++++++--
 .../chains/evm/telos-evm-testnet/index.ts     |  5 ++
 src/antelope/chains/evm/telos-evm/index.ts    |  5 ++
 src/antelope/stores/balances.ts               |  3 +-
 src/antelope/stores/chain.ts                  | 71 ++++++++++++++--
 src/antelope/stores/evm.ts                    | 20 +++--
 src/antelope/types/ChainSettings.ts           |  3 +
 src/antelope/wallets/index.ts                 |  2 +-
 src/components/evm/AppNav.vue                 | 27 +++++-
 src/components/evm/ScrollableInfoCards.vue    | 28 +++++-
 src/i18n/en-us/index.js                       |  1 +
 src/pages/evm/staking/StakingPageHeader.vue   | 85 +++++++++++++------
 12 files changed, 244 insertions(+), 53 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 83e9c9e9b..2675466b3 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -42,6 +42,9 @@ export default abstract class EVMChainSettings implements ChainSettings {
     // External query API support
     protected hyperion: AxiosInstance = axios.create({ baseURL: this.getHyperionEndpoint() });
 
+    // External query API support
+    protected api: AxiosInstance = axios.create({ baseURL: this.getApiEndpoint() });
+
     // External trusted metadata bucket for EVM contracts
     protected contractsBucket: AxiosInstance = axios.create({ baseURL: this.getTrustedContractsBucket() });
 
@@ -61,7 +64,10 @@ export default abstract class EVMChainSettings implements ChainSettings {
     tokenListPromise: Promise<TokenClass[]> | null = null;
 
     // EvmContracts cache mapped by address
-    protected contracts: Record<string, EvmContract | false> = {};
+    protected contracts: Record<string, {
+        promise: Promise<EvmContract | false>;
+        resolve?: (value: EvmContract | false) => void;
+    }> = {};
 
     constructor(network: string) {
         this.network = network;
@@ -214,6 +220,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract getDisplay(): string;
     abstract getHyperionEndpoint(): string;
     abstract getRPCEndpoint(): RpcEndpoint;
+    abstract getApiEndpoint(): string;
     abstract getPriceData(): Promise<PriceChartData>;
     abstract getUsdPrice(): Promise<number>;
     abstract getBuyMoreOfTokenLink(): string;
@@ -226,6 +233,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract hasIndexerSupport(): boolean;
     abstract trackAnalyticsEvent(params: Record<string, unknown>): void;
 
+    async getApy(): Promise<string> {
+        const response = await this.api.get('apy/evm');
+        return response.data as string;
+    }
+
     async getBalances(account: string): Promise<TokenBalance[]> {
         if (!this.hasIndexerSupport()) {
             console.error('Indexer API not supported for this chain:', this.getNetwork());
@@ -351,22 +363,47 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return `${token.symbol}-${token.address}-${this.getNetwork()}`;
     }
 
-    getContract(address: string): EvmContract | false | null {
+    async getContract(address: string): Promise<EvmContract | false | null> {
         const key = address.toLowerCase();
-        return this.contracts[key] ?? null;
+        const returnValue = this.contracts[key]?.promise ?? null;
+        if (!this.contracts[key]) {
+            this.contracts[key] = {
+                promise: Promise.resolve(false),
+            };
+            this.contracts[key].promise = new Promise((resolve) => {
+                this.contracts[key].resolve = resolve;
+            });
+        }
+        return returnValue;
     }
 
     addContract(address: string, contract: EvmContract) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
-            this.contracts[key] = contract;
+            this.contracts[key] = {
+                promise: Promise.resolve(contract),
+            };
+        } else {
+            if (this.contracts[key].resolve) {
+                this.contracts[key].resolve?.(contract);
+            } else {
+                console.error('Error: Contract already exists', address);
+            }
         }
     }
 
     setContractAsNotExisting(address: string) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
-            this.contracts[key] = false;
+            this.contracts[key] = {
+                promise: Promise.resolve(false),
+            };
+        } else {
+            if (this.contracts[key].resolve) {
+                this.contracts[key].resolve?.(false);
+            } else {
+                console.error('Error: Contract already exists', address);
+            }
         }
     }
 
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index 4c2ed6eef..20b915bfd 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -51,6 +51,7 @@ const RPC_ENDPOINT = {
     path: '/evm',
 };
 
+const API_ENDPOINT = 'https://api-dev.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://testnet.teloscan.io';
 const ECOSYSTEM_URL = 'https://www.telos.net/ecosystem';
@@ -81,6 +82,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return RPC_ENDPOINT;
     }
 
+    getApiEndpoint(): string {
+        return API_ENDPOINT;
+    }
+
     getPriceData(): Promise<PriceChartData> {
         return api.getCoingeckoPriceChartData('telos');
     }
diff --git a/src/antelope/chains/evm/telos-evm/index.ts b/src/antelope/chains/evm/telos-evm/index.ts
index c4e4acdf9..2d98d7581 100644
--- a/src/antelope/chains/evm/telos-evm/index.ts
+++ b/src/antelope/chains/evm/telos-evm/index.ts
@@ -51,6 +51,7 @@ const RPC_ENDPOINT = {
     path: '/evm',
 };
 
+const API_ENDPOINT = 'https://api.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://teloscan.io';
 const ECOSYSTEM_URL = 'https://www.telos.net/ecosystem';
@@ -81,6 +82,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return RPC_ENDPOINT;
     }
 
+    getApiEndpoint(): string {
+        return API_ENDPOINT;
+    }
+
     getPriceData(): Promise<PriceChartData> {
         return api.getCoingeckoPriceChartData('telos');
     }
diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 94c015c7d..0a6c7a1a0 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -178,7 +178,8 @@ export const useBalancesStore = defineStore(store_name, {
             this.trace('updateSystemTokensPrices', label);
             try {
                 // take the three system tokens
-                const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
+                const chain = useChainStore();
+                const chain_settings = chain.getChain(label).settings as EVMChainSettings;
                 const sysToken = chain_settings.getSystemToken();
                 const wrpToken = chain_settings.getWrappedSystemToken();
 
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 9febcf172..04fa53367 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -18,6 +18,8 @@
 import { defineStore } from 'pinia';
 import {
     CURRENT_CONTEXT,
+    useAccountStore,
+    useEVMStore,
     useFeedbackStore,
 } from 'src/antelope';
 
@@ -71,6 +73,7 @@ export interface ChainModel {
 
 export interface EvmChainModel {
     apy: string;
+    stakeRatio: ethers.BigNumber;
     gasPrice: ethers.BigNumber;
     settings: EVMChainSettings;
     tokens: TokenClass[];
@@ -85,11 +88,12 @@ export interface NativeChainModel {
 const newChainModel = (network: string, isNative: boolean): ChainModel => {
     const model = {
         apy: '',
+        stakeRatio: ethers.constants.Zero,
         settings: settings[network],
         tokens: [],
     } as ChainModel;
     if (!isNative) {
-        (model as EvmChainModel).gasPrice = ethers.BigNumber.from(0);
+        (model as EvmChainModel).gasPrice = ethers.constants.Zero;
     }
     return model;
 };
@@ -117,6 +121,7 @@ export const useChainStore = defineStore(store_name, {
         getExplorerUrl: () => (network: string) => (settings[network] as EVMChainSettings).getExplorerUrl(),
         getEcosystemUrl: () => (network: string) => (settings[network] as EVMChainSettings).getEcosystemUrl(),
         getNetworkSettings: () => (network: string) => settings[network],
+        getStakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).stakeRatio ?? ethers.constants.Zero,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -130,6 +135,7 @@ export const useChainStore = defineStore(store_name, {
                     this.updateSettings(label),
                     this.updateApy(label),
                     this.updateGasPrice(label),
+                    this.updateStakedRatio(label),
                 ]);
             } catch (error) {
                 console.error(error);
@@ -154,11 +160,7 @@ export const useChainStore = defineStore(store_name, {
             this.trace('updateApy', label);
             const chain = this.getChain(label);
             try {
-                if (chain.settings.isNative()) {
-                    chain.apy = await (chain.settings as NativeChainSettings).getApy();
-                } else {
-                    chain.apy = '';
-                }
+                chain.apy = await chain.settings.getApy();
             } catch (error) {
                 console.error(error);
                 throw new Error('antelope.chain.error_apy');
@@ -166,6 +168,57 @@ export const useChainStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading('updateApy');
             }
         },
+        async actualUpdateStakedRatio(label: string): Promise<ethers.BigNumber> {
+            // first we need the contract instance to be able to execute queries
+            this.trace('actualUpdateStakedRatio', label);
+            useFeedbackStore().setLoading('actualUpdateStakedRatio');
+            const evm = useEVMStore();
+            const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
+            const sysToken = chain_settings.getSystemToken();
+            const stkToken = chain_settings.getStakedSystemToken();
+            const authenticator = useAccountStore().getEVMAuthenticator(label);
+            if (!authenticator) {
+                useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+                this.trace('actualUpdateStakedRatio', label, '-> no authenticator');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contract = await evm.getContract(authenticator, stkToken.address, stkToken.type);
+            if (!contract) {
+                useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+                this.trace('actualUpdateStakedRatio', label, '-> no contract');
+                return ethers.constants.Zero;
+            }
+            const contractInstance = await contract.getContractInstance();
+            // Now we preview a deposit of 1 SYS to get the ratio
+            const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
+            const ratio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+
+            // Finally we update the store
+            this.setStakedRatio(label, ratio);
+            useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+            return ratio;
+        },
+        async updateStakedRatio(label: string): Promise<ethers.BigNumber> {
+            const accountModel = useAccountStore().getAccount(label);
+            if (accountModel && accountModel.account) {
+                // if the account is already logged, we can update the staked ratio
+                return this.actualUpdateStakedRatio(label);
+            } else {
+                // if the account is not logged, we need to wait for the login and then update the staked ratio
+                return new Promise((resolve) => {
+                    const sub = getAntelope().events.onAccountChanged.subscribe((result) => {
+                        if (result.label === label) {
+                            sub.unsubscribe();
+                            if (result.account) {
+                                // we need the user to be logged because the way of getting the staked ratio is by
+                                // executing an action from contract and that internally attempts retrieve the account from the provided signer
+                                resolve(this.actualUpdateStakedRatio(label));
+                            }
+                        }
+                    });
+                });
+            }
+        },
         async updateGasPrice(label: string): Promise<void> {
             useFeedbackStore().setLoading('updateGasPrice');
             this.trace('updateGasPrice');
@@ -205,6 +258,7 @@ export const useChainStore = defineStore(store_name, {
                 // make the change only if they are different
                 if (network !== this.__chains[label]?.settings.getNetwork()) {
                     this.__chains[label] = newChainModel(network, settings[network].isNative());
+                    this.trace('setChain', label, network, '--> void this.updateChainData(label);');
                     void this.updateChainData(label);
                     getAntelope().events.onNetworkChanged.next(
                         { label, chain: this.__chains[label] },
@@ -214,6 +268,11 @@ export const useChainStore = defineStore(store_name, {
                 throw new AntelopeError('antelope.chain.error_invalid_network', { network });
             }
         },
+        setStakedRatio(label: string, ratio: ethers.BigNumber) {
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
+            (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
+        },
     },
 });
 
diff --git a/src/antelope/stores/evm.ts b/src/antelope/stores/evm.ts
index 684bca268..337385141 100644
--- a/src/antelope/stores/evm.ts
+++ b/src/antelope/stores/evm.ts
@@ -63,7 +63,7 @@ export interface EVMState {
 const store_name = 'evm';
 
 const createManager = (authenticator: EVMAuthenticator):EvmContractManagerI => ({
-    getSigner: async () => toRaw((await authenticator.web3Provider()).getSigner()),
+    getSigner: async () => toRaw((await authenticator.web3Provider()).getSigner(useAccountStore().getAccount(authenticator.label).account)),
     getWeb3Provider: () => authenticator.web3Provider(),
     getFunctionIface: (hash:string) => toRaw(useEVMStore().getFunctionIface(hash)),
     getEventIface: (hash:string) => toRaw(useEVMStore().getEventIface(hash)),
@@ -333,7 +333,8 @@ export const useEVMStore = defineStore(store_name, {
             // Get from already queried contracts, add token data if needed & not present
             // (ie: queried beforehand w/o suspectedToken or a wrong suspectedToken)
             const chain_settings = useChainStore().getChain(authenticator.label).settings as EVMChainSettings;
-            const cached = chain_settings.getContract(addressLower);
+            const cached = await chain_settings.getContract(addressLower);
+            this.trace('getContract', address, 'cached:', cached);
             // If cached is null, it means this is the first time this address is queried
             if (cached !== null) {
                 if (
@@ -348,10 +349,6 @@ export const useEVMStore = defineStore(store_name, {
                 }
             }
 
-
-            // We mark this address as not existing so we don't query it again
-            chain_settings.setContractAsNotExisting(addressLower);
-
             // Then we try to get the contract creation info. If it fails, we never overwrite the previous call to set contract as not existing
             const creationInfo = await this.getContractCreation(authenticator, addressLower);
             // The the contract passes the creation info check,
@@ -370,8 +367,15 @@ export const useEVMStore = defineStore(store_name, {
                 return contract;
             }
 
-            this.trace('getContract', 'returning empty contract', address, creationInfo);
-            return await this.getEmptyContract(authenticator, addressLower, creationInfo);
+            if (creationInfo) {
+                this.trace('getContract', 'returning empty contract', address, creationInfo);
+                return await this.getEmptyContract(authenticator, addressLower, creationInfo);
+            } else {
+                // We mark this address as not existing so we don't query it again
+                this.trace('getContract', 'returning null', address);
+                chain_settings.setContractAsNotExisting(addressLower);
+                return null;
+            }
         },
 
         async checkBucket(authenticator: EVMAuthenticator, address:string): Promise<EvmContractMetadata | null> {
diff --git a/src/antelope/types/ChainSettings.ts b/src/antelope/types/ChainSettings.ts
index ff6ee121b..d21f60f07 100644
--- a/src/antelope/types/ChainSettings.ts
+++ b/src/antelope/types/ChainSettings.ts
@@ -11,11 +11,14 @@ export interface ChainSettings {
     getSmallLogoPath(): string;
     getLargeLogoPath(): string;
     getChainId(): string;
+    getHyperionEndpoint(): string;
     getRPCEndpoint(): RpcEndpoint;
+    getApiEndpoint(): string;
     getPriceData(): Promise<PriceChartData>;
     getUsdPrice(): Promise<number>;
     getSystemTokens(): TokenClass[];
     getNFTsInventory(address: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>;
     getNFTsCollection(contract: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>;
     trackAnalyticsEvent(params: Record<string, unknown>): void;
+    getApy(): Promise<string>;
 }
diff --git a/src/antelope/wallets/index.ts b/src/antelope/wallets/index.ts
index 33b7ee216..c29fab7e1 100644
--- a/src/antelope/wallets/index.ts
+++ b/src/antelope/wallets/index.ts
@@ -26,12 +26,12 @@ export class AntelopeWallets {
         this.trace('getAutenticator', name);
         return this.authenticators.get(name);
     }
+
 }
 
 export * from 'src/antelope/wallets/authenticators/EVMAuthenticator';
 export * from 'src/antelope/wallets/authenticators/InjectedProviderAuth';
 export * from 'src/antelope/wallets/authenticators/MetamaskAuth';
 export * from 'src/antelope/wallets/authenticators/OreIdAuth';
-export * from 'src/antelope/wallets/authenticators/SafePalAuth';
 export * from 'src/antelope/wallets/authenticators/WalletConnectAuth';
 export * from 'src/antelope/wallets/authenticators/SafePalAuth';
diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 9fb48b9c9..a7e94624c 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -5,7 +5,7 @@ import InlineSvg from 'vue-inline-svg';
 import UserInfo from 'components/evm/UserInfo.vue';
 import { getAntelope, useChainStore } from 'src/antelope';
 import EVMLoginButtons from 'pages/home/EVMLoginButtons.vue';
-import { getShortenedHash } from 'src/antelope/stores/utils';
+import { getShortenedHash, prettyPrintBalance } from 'src/antelope/stores/utils';
 
 const ant = getAntelope();
 const accountStore = ant.stores.account;
@@ -25,6 +25,17 @@ export default defineComponent({
         notifyOnSuccessfulLogin: false,
     }),
     computed: {
+        isLoadingApy() {
+            return this.prettyPrintApy === '';
+        },
+        prettyPrintApy() {
+            const apy = chainStore.currentEvmChain?.apy;
+            if (apy) {
+                return apy + '%';
+            } else {
+                return '';
+            }
+        },
         showMenuIcon() {
             return this.$q.screen.lt.md && !this.showBackButton;
         },
@@ -279,7 +290,14 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }} <b>8.23%</b> </span>
+                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }}
+                    <q-spinner
+                        v-if="isLoadingApy"
+                        color="white"
+                        class="c-app-nav__apy-spinner"
+                    />
+                    <b> {{ prettyPrintApy }}</b>
+                </span>
             </li>
 
             <li
@@ -491,6 +509,11 @@ export default defineComponent({
         display: inline-block;
     }
 
+    &__apy-spinner {
+        size: 16px;
+        margin-top: -5px;
+    }
+
     &__icon {
         // svg color overrides
         &--current-route:not(#{$this}__icon--acorn) path {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 1b10f0552..2285e02cd 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -9,6 +9,8 @@ const props = defineProps<{
         secondaryText?: string;
         lowContrastSecondaryText?: boolean;
         useSmallBox?: boolean;
+        isPrimaryLoading?: boolean;
+        isSecondaryLoading?: boolean;
     }[];
 }>();
 </script>
@@ -35,14 +37,23 @@ const props = defineProps<{
             />
         </div>
 
-        <h3>{{ card.primaryText }}</h3>
+        <h3 v-if="card.isPrimaryLoading" >
+            <q-spinner-dots class="c-scrollable-info-cards__primary-loading"  color="primary" />
+        </h3>
+        <h3 v-else class="c-scrollable-info-cards__primary-text">
+            {{ card.primaryText }}
+        </h3>
+
         <span
             v-if="card.secondaryText"
             :class="{
-                'u-text--low-contrast': card.lowContrastSecondaryText
+                'c-scrollable-info-cards__low-contrast': card.lowContrastSecondaryText
             }"
         >
-            {{ card.secondaryText }}
+            <q-spinner-dots v-if="card.isSecondaryLoading" class="c-scrollable-info-cards__secondary-loading" color="primary" />
+            <span v-else class="c-scrollable-info-cards__secondary-text">
+                {{ card.secondaryText }}
+            </span>
         </span>
     </div>
 </div>
@@ -67,6 +78,17 @@ const props = defineProps<{
         margin: auto;
     }
 
+    &__primary-loading {
+        margin-left: 4px;
+    }
+
+    &__secondary-loading {
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
+    }
+
+
     &__card {
         background-color: var(--bg-color);
         padding: 12px;
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3de2c9501..d54e6ffba 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -520,6 +520,7 @@ export default {
             error_update_data: 'Error in updating data',
             error_apy: 'Error in getting APY',
             error_invalid_network: 'Invalid network',
+            error_no_default_authenticator: 'No default authenticator found',
         },
         account: {
             error_login_native: 'An error has occurred trying to login to the native chain',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 52b4b682d..d5fcb9209 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -4,41 +4,70 @@ import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
 import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
-import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
 
 import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
 
-
+const label = 'current';
 const { t: $t } = useI18n();
 const userStore = useUserStore();
 const balancesStore = useBalancesStore();
 const chainStore = useChainStore();
 const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
 // data
-const systemTokenPrice = ref(0); // always equal to wrapped token price
 const loading = ref(true);
 
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
 const fiatCurrency = computed(() => userStore.fiatCurrency);
-const systemTokenName = computed(() => chainSettings.getSystemToken().name);
-const systemTokenSymbol = computed(() => chainSettings.getSystemToken().symbol);
-const stakedTokenSymbol = computed(() => chainSettings.getStakedSystemToken().symbol);
+const systemToken = chainSettings.getSystemToken();
+const stakedToken = chainSettings.getStakedSystemToken();
 
 const totalFiatValueText = ref('$ 4,324.35');
 
-const stakedFiatValueText = ref('$ 4,000.23');
-const stakedTokenBalanceBn = ref(ethers.utils.parseUnits('34021.230', WEI_PRECISION));
+// First cell: Staked
+const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || !stakedRatio.value.isZero());
+const stakedExpressedInSystemBalanceBn = computed(() => {
+    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(stakedRatio.value, stakedToken.decimals);
+        return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const systemTokenPrice = ref(systemToken.price.value);
+const stakedFiatValueBn = computed(() => {
+    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(stakedExpressedInSystemBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+
+// Second cell: Unstaking
 const unstakingFiatValueText = ref('$ 200.72');
-const unstakingBalanceBn = ref(ethers.utils.parseUnits('1242.0312', WEI_PRECISION));
-const withdrawableFiatValueText = ref('$ 123.02');
-const withdrawableBalanceBn = ref(ethers.utils.parseUnits('245.0225', WEI_PRECISION));
+const unstakingBalanceBn = ref(stakedTokenBalanceBn);
 
-const apyPrittyPrint = ref('8.23%');
+// Third cell: Withdrawable
+const withdrawableFiatValueText = ref('$ 123.02');
+const withdrawableBalanceBn = ref(stakedRatio);
+
+const apyPrittyPrint = computed(() => {
+    const apy = chainStore.currentEvmChain?.apy;
+    if (apy) {
+        return apy + '%';
+    } else {
+        return '--';
+    }
+});
+const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref('10 days');
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
@@ -46,44 +75,46 @@ const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
 const evmNetworkName = ref('Telos EVM');
 
 const firstLineData = computed(() => [{
-    label: $t('evm_stake.staked_card_label', { symbol: systemTokenSymbol.value }),
-    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
-    primaryText: stakedFiatValueText.value,
-    secondaryText: prettyPrintToken(stakedTokenBalanceBn.value, systemTokenSymbol.value),
+    label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
+    tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
+    primaryText: prettyPrintToken(stakedFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isStakedLoading.value ? '' : prettyPrintToken(stakedExpressedInSystemBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
+    isPrimaryLoading: isStakedLoading.value,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.unstaking_card_label'),
-    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
     primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemTokenSymbol.value),
+    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.withdrawable_card_label'),
-    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value, unlockPeriod: unlockPeriod.value }),
+    tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
     primaryText: withdrawableFiatValueText.value,
-    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemTokenSymbol.value),
+    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }]);
 
 const secondLineData = computed(() => [{
-    label: $t('evm_stake.apy_card_label', { symbol: systemTokenSymbol.value }),
-    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    label: $t('evm_stake.apy_card_label', { symbol: systemToken.symbol }),
+    tooltip: $t('evm_stake.apy_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
     secondaryText: apyPrittyPrint.value,
     lowContrastSecondaryText: false,
+    isSecondaryLoading: apyisLoading.value,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.unstaking_period_card_label'),
-    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
+    tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
     secondaryText: unlockPeriod.value,
     lowContrastSecondaryText: false,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.tvl_card_label'),
-    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedTokenSymbol.value, systemSymbol: systemTokenSymbol.value }),
-    secondaryText: prettyPrintToken(tvlAmountBn.value, systemTokenSymbol.value),
+    tooltip: $t('evm_stake.tvl_card_tooltip', { evmNetworkName: evmNetworkName.value, stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
+    secondaryText: prettyPrintToken(tvlAmountBn.value, systemToken.symbol),
     lowContrastSecondaryText: false,
     useSmallBox: true,
 }]);
@@ -92,7 +123,7 @@ const secondLineData = computed(() => [{
 // methods
 onBeforeMount(() => {
     chainSettings.getUsdPrice().then((price) => {
-        systemTokenPrice.value = price;
+        // systemTokenPrice.value = price;
     }).finally(() => {
         loading.value = false;
     });
@@ -114,7 +145,7 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 <template>
 <div class="c-staking-header">
     <div class="text-center q-mb-xl">
-        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemTokenName }) }}</h5>
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 

From bd55eaebef16da58ee08cfc6b07375f7721426f9 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 23 Aug 2023 14:01:24 -0300
Subject: [PATCH 154/268] saving WIP

---
 src/antelope/stores/chain.ts                | 21 +++++++++++++++------
 src/pages/evm/staking/StakingPageHeader.vue | 11 +++++++++--
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 04fa53367..fea5050b1 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -74,6 +74,7 @@ export interface ChainModel {
 export interface EvmChainModel {
     apy: string;
     stakeRatio: ethers.BigNumber;
+    unstakeRatio: ethers.BigNumber;
     gasPrice: ethers.BigNumber;
     settings: EVMChainSettings;
     tokens: TokenClass[];
@@ -89,6 +90,7 @@ const newChainModel = (network: string, isNative: boolean): ChainModel => {
     const model = {
         apy: '',
         stakeRatio: ethers.constants.Zero,
+        unstakeRatio: ethers.constants.Zero,
         settings: settings[network],
         tokens: [],
     } as ChainModel;
@@ -122,6 +124,7 @@ export const useChainStore = defineStore(store_name, {
         getEcosystemUrl: () => (network: string) => (settings[network] as EVMChainSettings).getEcosystemUrl(),
         getNetworkSettings: () => (network: string) => settings[network],
         getStakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).stakeRatio ?? ethers.constants.Zero,
+        getUnstakedRatio: state => (label: string) => (state.__chains[label] as EvmChainModel).unstakeRatio ?? ethers.constants.Zero,
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -168,7 +171,7 @@ export const useChainStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading('updateApy');
             }
         },
-        async actualUpdateStakedRatio(label: string): Promise<ethers.BigNumber> {
+        async actualUpdateStakedRatio(label: string): Promise<void> {
             // first we need the contract instance to be able to execute queries
             this.trace('actualUpdateStakedRatio', label);
             useFeedbackStore().setLoading('actualUpdateStakedRatio');
@@ -186,19 +189,20 @@ export const useChainStore = defineStore(store_name, {
             if (!contract) {
                 useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
                 this.trace('actualUpdateStakedRatio', label, '-> no contract');
-                return ethers.constants.Zero;
+                return;
             }
             const contractInstance = await contract.getContractInstance();
             // Now we preview a deposit of 1 SYS to get the ratio
             const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
-            const ratio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+            const stakedRatio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
+            const unstakedRatio:ethers.BigNumber = await contractInstance.previewWithdraw(oneSys);
 
             // Finally we update the store
-            this.setStakedRatio(label, ratio);
+            this.setStakedRatio(label, stakedRatio);
+            this.setUnstakedRatio(label, unstakedRatio);
             useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
-            return ratio;
         },
-        async updateStakedRatio(label: string): Promise<ethers.BigNumber> {
+        async updateStakedRatio(label: string): Promise<void> {
             const accountModel = useAccountStore().getAccount(label);
             if (accountModel && accountModel.account) {
                 // if the account is already logged, we can update the staked ratio
@@ -273,6 +277,11 @@ export const useChainStore = defineStore(store_name, {
             this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
         },
+        setUnstakedRatio(label: string, ratio: ethers.BigNumber) {
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            this.trace('setUnstakedRatio', label, ratio.toString(), ratioNumber);
+            (this.__chains[label] as EvmChainModel).unstakeRatio = ratio;
+        },
     },
 });
 
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index d5fcb9209..65b9bee54 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -32,10 +32,14 @@ const totalFiatValueText = ref('$ 4,324.35');
 // First cell: Staked
 const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
 const stakedRatio = computed(() => chainStore.getStakedRatio(label));
-const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || !stakedRatio.value.isZero());
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
     if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
-        const ratioNumber = ethers.utils.formatUnits(stakedRatio.value, stakedToken.decimals);
+        console.log('stakedRatio', stakedRatio.value.toString());
+        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
+        console.log('inverseRatio', inverseRatio.toString());
+        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
+        console.log('ratioNumber', ratioNumber);
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -149,6 +153,9 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
     </div>
 
+    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
+    <div>{{ stakedRatio?.toString() }}</div>
+
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 1036f15e507057919f0dbd9c9033d37baac871dc Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 24 Aug 2023 20:00:04 -0300
Subject: [PATCH 155/268] Fetching real Rex data for the staking page header

---
 src/antelope/chains/EVMChainSettings.ts       |   1 +
 .../chains/evm/telos-evm-testnet/index.ts     |   6 +-
 src/antelope/chains/evm/telos-evm/index.ts    |   6 +-
 src/antelope/stores/rex.ts                    | 141 +++++++++++++++++-
 src/pages/evm/staking/StakingPageHeader.vue   |  65 ++++++--
 5 files changed, 200 insertions(+), 19 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 2675466b3..b406f0d5d 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -216,6 +216,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract getSystemToken(): TokenClass;
     abstract getStakedSystemToken(): TokenClass;
     abstract getWrappedSystemToken(): TokenClass;
+    abstract getEscrowContractAddress(): string;
     abstract getChainId(): string;
     abstract getDisplay(): string;
     abstract getHyperionEndpoint(): string;
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index 20b915bfd..7f1778c14 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -50,7 +50,7 @@ const RPC_ENDPOINT = {
     port: 443,
     path: '/evm',
 };
-
+const ESCROW_CONTRACT_ADDRESS = '0x7E9cF9fBc881652B05BB8F26298fFAB538163b6f';
 const API_ENDPOINT = 'https://api-dev.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://testnet.teloscan.io';
@@ -102,6 +102,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return W_TOKEN;
     }
 
+    getEscrowContractAddress(): string {
+        return ESCROW_CONTRACT_ADDRESS;
+    }
+
     async getUsdPrice(): Promise<number> {
         if (this.hasIndexerSupport()) {
             const nativeTokenSymbol = this.getSystemToken().symbol;
diff --git a/src/antelope/chains/evm/telos-evm/index.ts b/src/antelope/chains/evm/telos-evm/index.ts
index 2d98d7581..06a4538fc 100644
--- a/src/antelope/chains/evm/telos-evm/index.ts
+++ b/src/antelope/chains/evm/telos-evm/index.ts
@@ -50,7 +50,7 @@ const RPC_ENDPOINT = {
     port: 443,
     path: '/evm',
 };
-
+const ESCROW_CONTRACT_ADDRESS = '0x95F5713A1422Aa3FBD3DCB8D553945C128ee3855';
 const API_ENDPOINT = 'https://api.telos.net/v1';
 const WEI_PRECISION = 18;
 const EXPLORER_URL = 'https://teloscan.io';
@@ -102,6 +102,10 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return W_TOKEN;
     }
 
+    getEscrowContractAddress(): string {
+        return ESCROW_CONTRACT_ADDRESS;
+    }
+
     async getUsdPrice(): Promise<number> {
         if (this.hasIndexerSupport()) {
             const nativeTokenSymbol = this.getSystemToken().symbol;
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 6c4006b34..50198bcd6 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -5,14 +5,47 @@
  * the state of that account in the REX system.
  */
 
+import { ethers } from 'ethers';
 import { defineStore } from 'pinia';
+import { filter } from 'rxjs';
 import {
-    createInitFunction,
+    isTracingAll,
     createTraceFunction,
+    useFeedbackStore,
 } from 'src/antelope/stores/feedback';
+import { AntelopeError, Label } from 'src/antelope/types';
+import { toRaw } from 'vue';
+import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
+import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+
+
+
+export interface EvmRexDeposit {
+    amount: ethers.BigNumber;
+    until: ethers.BigNumber;
+}
+
+export interface RexModel {
+    withdrawable: ethers.BigNumber;
+    balance: ethers.BigNumber;
+    totalStaking: ethers.BigNumber;
+}
+
+export interface NativeRexModel extends RexModel {
+    _: boolean; // dummy property to avoid lint issues
+}
+
+export interface EvmRexModel extends RexModel {
+    withdrawable: ethers.BigNumber;
+    deposits: EvmRexDeposit[];
+    balance: ethers.BigNumber;
+    totalStaking: ethers.BigNumber;
+}
+
 
 export interface RexState {
-    __: string;
+    __rexData: { [label: Label]: RexModel };
 }
 
 const store_name = 'rex';
@@ -20,13 +53,113 @@ const store_name = 'rex';
 export const useRexStore = defineStore(store_name, {
     state: (): RexState => (rexInitialState),
     getters: {
+        getRexData: state => (label: string) => state.__rexData[label] ?? null,
     },
     actions: {
         trace: createTraceFunction(store_name),
-        init: createInitFunction(store_name),
+        init: () => {
+            useFeedbackStore().setDebug(store_name, isTracingAll());
+            getAntelope().events.onAccountChanged.pipe(
+                filter(({ label, account }) => !!label && !!account),
+            ).subscribe({
+                next: async ({ label, account }) => {
+                    if (label === 'current') {
+                        await useRexStore().updateRexDataForAccount(label, toRaw(account));
+                    }
+                },
+            });
+        },
+        async getContractInstance(label: string, address: string) {
+            const authenticator = useAccountStore().getEVMAuthenticator(label);
+            if (!authenticator) {
+                this.trace('getStakedSystemContractInstance', label, '-> no authenticator');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contract = await useEVMStore().getContract(authenticator, address);
+            if (!contract) {
+                this.trace('getStakedSystemContractInstance', label, '-> no contract');
+                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+            }
+            const contractInstance = await contract.getContractInstance();
+            return contractInstance;
+        },
+        async getStakedSystemContractInstance(label: string) {
+            const address = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().address;
+            return this.getContractInstance(label, address);
+        },
+        async getEscrowContractInstance(label: string) {
+            const address = (useChainStore().getChain(label).settings as EVMChainSettings).getEscrowContractAddress();
+            return this.getContractInstance(label, address);
+        },
+        async updateTotalStaking(label: string) {
+            this.trace('updateTotalStaking', label);
+            const contract = await this.getStakedSystemContractInstance(label);
+            const totalStaking = await contract.totalAssets();
+            this.setTotalStaking(label, totalStaking);
+        },
+        async updateRexDataForAccount(label: string, account: AccountModel | null) {
+            this.trace('updateRexDataForAccount', label, account);
+            useFeedbackStore().setLoading('updateRexDataForAccount');
+            try {
+                await Promise.all([
+                    this.updateWithdrawable(label),
+                    this.updateDeposits(label),
+                    this.updateBalance(label),
+                    this.updateTotalStaking(label),
+                ]);
+            } catch (error) {
+                console.error(error);
+                useFeedbackStore().unsetLoading('updateRexDataForAccount');
+            }
+        },
+        async updateWithdrawable(label: string) {
+            this.trace('updateWithdrawable', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const withdrawable = await contract.maxWithdraw(address);
+            this.setWithdrawable(label, withdrawable);
+        },
+        async updateDeposits(label: string) {
+            this.trace('updateDeposits', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const deposits = await contract.depositsOf(address);
+            this.setDeposits(label, deposits);
+        },
+        async updateBalance(label: string) {
+            this.trace('updateBalance', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const address = useAccountStore().getAccount(label).account;
+            const balance = await contract.balanceOf(address);
+            this.setBalance(label, balance);
+        },
+        // commits ---------------
+        setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(withdrawable, 18));
+            this.trace('setWithdrawable', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).withdrawable = withdrawable;
+        },
+        setDeposits(label: string, deposits: EvmRexDeposit[]) {
+            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, 18))));
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).deposits = deposits;
+        },
+        setBalance(label: string, balance: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(balance, 18));
+            this.trace('setBalance', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).balance = balance;
+        },
+        setTotalStaking(label: string, totalStaking: ethers.BigNumber) {
+            const num = parseFloat(ethers.utils.formatUnits(totalStaking, 18));
+            this.trace('setTotalStaking', label, num);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).totalStaking = totalStaking;
+        },
     },
 });
 
 const rexInitialState: RexState = {
-    __: '',
+    __rexData: {},
 };
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 65b9bee54..c602a537d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -3,7 +3,7 @@ import { computed, onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
-import { useUserStore, useBalancesStore, useChainStore } from 'src/antelope';
+import { useUserStore, useBalancesStore, useChainStore, useRexStore } from 'src/antelope';
 import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
@@ -45,9 +45,9 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = ref(systemToken.price.value);
+const systemTokenPrice = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value);
 const stakedFiatValueBn = computed(() => {
-    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value) {
+    if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
         return convertCurrency(stakedExpressedInSystemBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
     } else {
@@ -56,12 +56,42 @@ const stakedFiatValueBn = computed(() => {
 });
 
 // Second cell: Unstaking
-const unstakingFiatValueText = ref('$ 200.72');
-const unstakingBalanceBn = ref(stakedTokenBalanceBn);
+const unstakingBalanceBn = computed(() => {
+    const rexData = useRexStore().getRexData(label);
+    if (rexData) {
+        const totalBalance = rexData.balance;
+        const withdrawableBalance = rexData.withdrawable;
+        if (totalBalance && withdrawableBalance) {
+            return totalBalance.sub(withdrawableBalance);
+        } else {
+            return undefined;
+        }
+    } else {
+        return undefined;
+    }
+});
+const unstakingFiatValueBn = computed(() => {
+    if (unstakingBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(unstakingBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const isUnstakingLoading = computed(() => unstakingBalanceBn.value === undefined);
 
 // Third cell: Withdrawable
-const withdrawableFiatValueText = ref('$ 123.02');
-const withdrawableBalanceBn = ref(stakedRatio);
+const withdrawableBalanceBn = computed(() => useRexStore().getRexData(label)?.withdrawable);
+const withdrawableFiatValueBn = computed(() => {
+    if (withdrawableBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
+        return convertCurrency(withdrawableBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
+    } else {
+        return undefined;
+    }
+});
+const isWithdrawableLoading = computed(() => withdrawableBalanceBn.value === undefined);
+
 
 const apyPrittyPrint = computed(() => {
     const apy = chainStore.currentEvmChain?.apy;
@@ -75,8 +105,15 @@ const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref('10 days');
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
-const tvlAmountBn = ref(ethers.utils.parseUnits('102400.0', WEI_PRECISION));
-const evmNetworkName = ref('Telos EVM');
+const tvlAmountBn = computed(() => {
+    const totalStaking = useRexStore().getRexData(label)?.totalStaking;
+    if (totalStaking) {
+        return totalStaking;
+    } else {
+        return undefined;
+    }
+});
+const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
 const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
@@ -89,16 +126,18 @@ const firstLineData = computed(() => [{
 }, {
     label: $t('evm_stake.unstaking_card_label'),
     tooltip: $t('evm_stake.unstaking_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
-    primaryText: unstakingFiatValueText.value,
-    secondaryText: prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
+    primaryText: prettyPrintToken(unstakingFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isUnstakingLoading.value ? '' : prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol),
+    isPrimaryLoading: isUnstakingLoading.value,
     lowContrastSecondaryText: true,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.withdrawable_card_label'),
     tooltip: $t('evm_stake.withdrawable_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol, unlockPeriod: unlockPeriod.value }),
-    primaryText: withdrawableFiatValueText.value,
-    secondaryText: prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
+    primaryText: prettyPrintToken(withdrawableFiatValueBn.value, fiatCurrency.value),
+    secondaryText: isWithdrawableLoading.value ? '' : prettyPrintToken(withdrawableBalanceBn.value, systemToken.symbol),
     lowContrastSecondaryText: true,
+    isPrimaryLoading: isWithdrawableLoading.value,
     useSmallBox: true,
 }]);
 

From ca21b073e42734a51ff9921a082dd4530c0d7cd4 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 10:19:53 -0300
Subject: [PATCH 156/268] addressing feedback

---
 src/antelope/chains/EVMChainSettings.ts     | 18 ++++++++++++
 src/components/evm/ScrollableInfoCards.vue  |  6 +++-
 src/i18n/en-us/index.js                     |  7 +++--
 src/pages/evm/staking/StakingPageHeader.vue | 32 ++++++++++-----------
 4 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index b406f0d5d..d09580c80 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -364,6 +364,14 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return `${token.symbol}-${token.address}-${this.getNetwork()}`;
     }
 
+    /**
+     * This method returns the cached value for the requested contract which can be one of three values:
+     * - Promise<EvmContract> if the contract is already cached
+     * - Promise<null> if the contract was never requested before
+     * - Promise<false> if the contract was requested, not found and set as not existing (to avoid requesting it again)
+     * @param address contract requested
+     * @returns Promise for the requested contract or false if it doesn't exist
+     */
     async getContract(address: string): Promise<EvmContract | false | null> {
         const key = address.toLowerCase();
         const returnValue = this.contracts[key]?.promise ?? null;
@@ -378,6 +386,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return returnValue;
     }
 
+    /**
+     * This method adds a contract to the cache and resolves the promise for it
+     * @param address address of the contract
+     * @param contract contract instance to be cached
+     */
     addContract(address: string, contract: EvmContract) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
@@ -393,6 +406,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
         }
     }
 
+    /**
+     * This method sets a contract as not existing and resolves the promise to false for it.
+     * This is done to distinguish between a contract that was never requested before and one that was requested and not found.
+     * @param address address of the contract
+     */
     setContractAsNotExisting(address: string) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index 2285e02cd..d05e600b5 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -26,7 +26,7 @@ const props = defineProps<{
         }"
     >
         <div class="c-scrollable-info-cards__card-header">
-            <h5 class="u-text--low-contrast">
+            <h5 class="c-scrollable-info-cards__card-header-label u-text--low-contrast">
                 {{ card.label }}
             </h5>
 
@@ -110,5 +110,9 @@ const props = defineProps<{
         justify-content: space-between;
         margin-bottom: 4px;
     }
+
+    &__card-header-label {
+        white-space: nowrap;
+    }
 }
 </style>
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index d54e6ffba..161bacbd4 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -190,7 +190,7 @@ export default {
         unwrap_input_label: 'Unwrapping Amount',
     },
     evm_stake: {
-        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdrawable {token}',
         staked_card_label: 'Staked {symbol}',
         staked_card_tooltip: 'Staked tokens:\n\n' +
         'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
@@ -201,8 +201,8 @@ export default {
         'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
-        withdrawable_card_label: 'Withdraw-able',
-        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        withdrawable_card_label: 'withdrawable',
+        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
@@ -220,6 +220,7 @@ export default {
         tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
         'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
+        unstaking_period: '10 days',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index c602a537d..972d3e6b9 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -17,9 +17,6 @@ const userStore = useUserStore();
 const balancesStore = useBalancesStore();
 const chainStore = useChainStore();
 const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
-// data
-const loading = ref(true);
-
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
@@ -27,7 +24,6 @@ const fiatCurrency = computed(() => userStore.fiatCurrency);
 const systemToken = chainSettings.getSystemToken();
 const stakedToken = chainSettings.getStakedSystemToken();
 
-const totalFiatValueText = ref('$ 4,324.35');
 
 // First cell: Staked
 const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
@@ -102,7 +98,7 @@ const apyPrittyPrint = computed(() => {
     }
 });
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
-const unlockPeriod = ref('10 days');
+const unlockPeriod = ref($t('evm_stake.unstaking_period'));
 
 // tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
 const tvlAmountBn = computed(() => {
@@ -115,6 +111,14 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
+// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
+const totalFiatValueBn = computed(() => {
+    const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
+    const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
+    const withdrawableFiatValue = withdrawableFiatValueBn.value ?? BigNumber.from(0);
+    return stakedFiatValue.add(unstakingFiatValue).add(withdrawableFiatValue);
+});
+
 const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),
     tooltip: $t('evm_stake.staked_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
@@ -162,20 +166,14 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
-
-// methods
-onBeforeMount(() => {
-    chainSettings.getUsdPrice().then((price) => {
-        // systemTokenPrice.value = price;
-    }).finally(() => {
-        loading.value = false;
-    });
-});
-
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
+    let decimals = symbol === fiatCurrency.value ? 2 : 4;
+    if (!amount || amount.isZero()) {
+        decimals = 1;
+    }
     return prettyPrintCurrency(
         amount ?? BigNumber.from(0),
-        4,
+        decimals,
         fiatLocale.value,
         false,
         symbol,
@@ -189,7 +187,7 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 <div class="c-staking-header">
     <div class="text-center q-mb-xl">
         <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
-        <h1 class="u-text--high-contrast">{{ totalFiatValueText }}</h1>
+        <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
     <div>{{ stakedTokenBalanceBn?.toString() }}</div>

From 4d8c474f67af13af205b9fa6497aa80b82261e53 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 14:17:28 -0300
Subject: [PATCH 157/268] merging two functions into one

---
 src/antelope/chains/EVMChainSettings.ts | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index d09580c80..e229a303c 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -391,7 +391,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      * @param contract contract instance to be cached
      */
-    addContract(address: string, contract: EvmContract) {
+    addContract(address: string, contract: EvmContract | false) {
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
             this.contracts[key] = {
@@ -412,18 +412,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      */
     setContractAsNotExisting(address: string) {
-        const key = address.toLowerCase();
-        if (!this.contracts[key]) {
-            this.contracts[key] = {
-                promise: Promise.resolve(false),
-            };
-        } else {
-            if (this.contracts[key].resolve) {
-                this.contracts[key].resolve?.(false);
-            } else {
-                console.error('Error: Contract already exists', address);
-            }
-        }
+        return this.addContract(address, false);
     }
 
     async getEVMTransactions(filter: IndexerTransactionsFilter): Promise<IndexerAccountTransactionsResponse> {

From b540109c9aaf341967ac2f159db43bf88795f050 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 11:25:05 -0300
Subject: [PATCH 158/268] addressing Erza's feedback

---
 src/antelope/chains/EVMChainSettings.ts     |  5 +-
 src/antelope/stores/chain.ts                |  6 +-
 src/antelope/stores/rex.ts                  | 62 ++++++++++++++++++---
 src/antelope/stores/utils/currency-utils.ts |  5 +-
 src/antelope/types/TokenClass.ts            |  6 +-
 src/pages/evm/staking/StakingPageHeader.vue | 19 +++++--
 src/pages/evm/wallet/SendPage.vue           | 10 ++--
 7 files changed, 88 insertions(+), 25 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index e229a303c..504cc0ca7 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -28,6 +28,7 @@ import { ethers } from 'ethers';
 import { toStringNumber } from 'src/antelope/stores/utils/currency-utils';
 import { dateIsWithinXMinutes } from 'src/antelope/stores/utils/date-utils';
 import { getAntelope } from 'src/antelope';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 
 export default abstract class EVMChainSettings implements ChainSettings {
@@ -525,10 +526,10 @@ export default abstract class EVMChainSettings implements ChainSettings {
     async getEstimatedGas(limit: number): Promise<{ system:ethers.BigNumber, fiat:ethers.BigNumber }> {
         const gasPrice: ethers.BigNumber = await this.getGasPrice();
         const tokenPrice: number = await this.getUsdPrice();
-        const price = ethers.utils.parseUnits(toStringNumber(tokenPrice), 18);
+        const price = ethers.utils.parseUnits(toStringNumber(tokenPrice), WEI_PRECISION);
         const system = gasPrice.mul(limit);
         const fiatDouble = system.mul(price);
-        const fiat = fiatDouble.div(ethers.utils.parseUnits('1', 18));
+        const fiat = fiatDouble.div(ethers.utils.parseUnits('1', WEI_PRECISION));
         return { system, fiat };
     }
     async getLatestBlock(): Promise<ethers.BigNumber> {
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index fea5050b1..9acd20397 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -273,12 +273,14 @@ export const useChainStore = defineStore(store_name, {
             }
         },
         setStakedRatio(label: string, ratio: ethers.BigNumber) {
-            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            const decimals = (this.getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
             this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
         },
         setUnstakedRatio(label: string, ratio: ethers.BigNumber) {
-            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, 18));
+            const decimals = (this.getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
+            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
             this.trace('setUnstakedRatio', label, ratio.toString(), ratioNumber);
             (this.__chains[label] as EvmChainModel).unstakeRatio = ratio;
         },
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 50198bcd6..f154ed6fd 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -18,6 +18,7 @@ import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
 import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 
 
@@ -69,6 +70,12 @@ export const useRexStore = defineStore(store_name, {
                 },
             });
         },
+        /**
+         * auxiliar method to get a contract instance. Only used internally.
+         * @param label identifies the context (network on this case) for the data
+         * @param address the contract address
+         * @returns the contract instance
+         */
         async getContractInstance(label: string, address: string) {
             const authenticator = useAccountStore().getEVMAuthenticator(label);
             if (!authenticator) {
@@ -83,35 +90,60 @@ export const useRexStore = defineStore(store_name, {
             const contractInstance = await contract.getContractInstance();
             return contractInstance;
         },
+        /**
+         * auxiliar method to get the staked system contract instance
+         * @param label identifies the context (network on this case) for the data
+         * @returns the contract instance
+         */
         async getStakedSystemContractInstance(label: string) {
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().address;
             return this.getContractInstance(label, address);
         },
+        /**
+         * auxiliar method to get the escrow contract instance
+         * @param label identifies the context (network on this case) for the data
+         * @returns the contract instance
+         */
         async getEscrowContractInstance(label: string) {
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getEscrowContractAddress();
             return this.getContractInstance(label, address);
         },
+        /**
+         * This method queries the total amount of staked tokens in the system and maintains it in the store.
+         * @param label identifies the context (network on this case) for the data
+         */
         async updateTotalStaking(label: string) {
             this.trace('updateTotalStaking', label);
             const contract = await this.getStakedSystemContractInstance(label);
             const totalStaking = await contract.totalAssets();
             this.setTotalStaking(label, totalStaking);
         },
+        /**
+         * This method shopuld be called to quiery the REX data for a given account,
+         * along with the current stato of the total staked tokens on the system.
+         * @param label identifies the context (network on this case) for the data
+         * @param account the account to update the data for
+         */
         async updateRexDataForAccount(label: string, account: AccountModel | null) {
             this.trace('updateRexDataForAccount', label, account);
             useFeedbackStore().setLoading('updateRexDataForAccount');
             try {
                 await Promise.all([
-                    this.updateWithdrawable(label),
-                    this.updateDeposits(label),
-                    this.updateBalance(label),
-                    this.updateTotalStaking(label),
+                    this.updateWithdrawable(label),  // account's data
+                    this.updateDeposits(label),      // account's data
+                    this.updateBalance(label),       // account's data
+                    this.updateTotalStaking(label),  // system's data
                 ]);
             } catch (error) {
                 console.error(error);
                 useFeedbackStore().unsetLoading('updateRexDataForAccount');
             }
         },
+        /**
+         * This method queries the withdrawable amount for a given account and maintains it in the store.
+         * The withdrawable amount is the amount of tokens that can be withdrawn from the REX system right now.
+         * @param label identifies the context (account-network) for the data
+         */
         async updateWithdrawable(label: string) {
             this.trace('updateWithdrawable', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -119,6 +151,12 @@ export const useRexStore = defineStore(store_name, {
             const withdrawable = await contract.maxWithdraw(address);
             this.setWithdrawable(label, withdrawable);
         },
+        /**
+         * This method queries the deposits for a given account and maintains it in the store.
+         * The deposits contains a list of individual whitdrawls attempts, each with an amount and a date.
+         * If the date is in the future, the amount is not available for withdrawal yet.
+         * @param label identifies the context (account-network) for the data
+         */
         async updateDeposits(label: string) {
             this.trace('updateDeposits', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -126,6 +164,11 @@ export const useRexStore = defineStore(store_name, {
             const deposits = await contract.depositsOf(address);
             this.setDeposits(label, deposits);
         },
+        /**
+         * This method queries the balance for a given account and maintains it in the store.
+         * The account's balance is the sum of all the deposits (withdrawable or not)
+         * @param label identifies the context (account-network) for the data
+         */
         async updateBalance(label: string) {
             this.trace('updateBalance', label);
             const contract = await this.getEscrowContractInstance(label);
@@ -133,26 +176,29 @@ export const useRexStore = defineStore(store_name, {
             const balance = await contract.balanceOf(address);
             this.setBalance(label, balance);
         },
+        getStakingDecimals() {
+            return useChainStore().currentEvmChain?.settings.getStakedSystemToken().decimals || WEI_PRECISION;
+        },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(withdrawable, 18));
+            const num = parseFloat(ethers.utils.formatUnits(withdrawable, this.getStakingDecimals()));
             this.trace('setWithdrawable', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).withdrawable = withdrawable;
         },
         setDeposits(label: string, deposits: EvmRexDeposit[]) {
-            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, 18))));
+            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, this.getStakingDecimals()))));
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).deposits = deposits;
         },
         setBalance(label: string, balance: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(balance, 18));
+            const num = parseFloat(ethers.utils.formatUnits(balance, this.getStakingDecimals()));
             this.trace('setBalance', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).balance = balance;
         },
         setTotalStaking(label: string, totalStaking: ethers.BigNumber) {
-            const num = parseFloat(ethers.utils.formatUnits(totalStaking, 18));
+            const num = parseFloat(ethers.utils.formatUnits(totalStaking, this.getStakingDecimals()));
             this.trace('setTotalStaking', label, num);
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).totalStaking = totalStaking;
diff --git a/src/antelope/stores/utils/currency-utils.ts b/src/antelope/stores/utils/currency-utils.ts
index 5da419231..5c6998d8e 100644
--- a/src/antelope/stores/utils/currency-utils.ts
+++ b/src/antelope/stores/utils/currency-utils.ts
@@ -2,6 +2,7 @@ import { BigNumber } from 'ethers';
 import { parseUnits } from 'ethers/lib/utils';
 import { formatUnits } from '@ethersproject/units';
 import Decimal from 'decimal.js';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 /**
  * Given a number or string, returns a string representation of the number with up to 18 decimal places
@@ -14,7 +15,7 @@ export function toStringNumber(value: number | string): string {
         return value;
     } else if (typeof value === 'number') {
         const num = new Decimal(value);
-        return num.toFixed(18);
+        return num.toFixed(WEI_PRECISION);
     } else {
         throw new Error('Invalid value type: ' + typeof value);
     }
@@ -309,7 +310,7 @@ export function getFloatReciprocal(float: number | string) {
 
     return new Decimal(1)
         .dividedBy(float)
-        .toFixed(18)
+        .toFixed(WEI_PRECISION)
         .replace(trailingZeroesRegex, '')
         .replace(trailingDotRegex, '');
 }
diff --git a/src/antelope/types/TokenClass.ts b/src/antelope/types/TokenClass.ts
index 7d372a7d0..54f048872 100644
--- a/src/antelope/types/TokenClass.ts
+++ b/src/antelope/types/TokenClass.ts
@@ -1,5 +1,5 @@
 import { ethers } from 'ethers';
-import { formatWei } from 'src/antelope/stores/utils';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
 import { toStringNumber } from 'src/antelope/stores/utils/currency-utils';
 
 export const TOKEN_PRICE_DECIMALS = 18;
@@ -89,7 +89,7 @@ export class TokenPrice {
     }
 
     get decimals(): number {
-        return this.market?.info.decimals || 18;
+        return this.market?.info.decimals || TOKEN_PRICE_DECIMALS;
     }
 
     // Returns the token price as BigNumber
@@ -193,7 +193,7 @@ export class TokenClass implements TokenSourceInfo {
         this.chainId = sourceInfo.chainId;
         this.network = sourceInfo.network;
         this.name = sourceInfo.name;
-        this.decimals = sourceInfo.decimals ?? sourceInfo.precision ?? 18;
+        this.decimals = sourceInfo.decimals ?? sourceInfo.precision ?? WEI_PRECISION;
         this.isSystem = sourceInfo.isSystem;
         this.isNative = sourceInfo.isNative;
         this.logo = sourceInfo.logo ?? sourceInfo.logoURI;
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 972d3e6b9..6d2d5bd62 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
@@ -41,7 +41,7 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value);
+const systemTokenPrice = ref(undefined as BigNumber | undefined);
 const stakedFiatValueBn = computed(() => {
     if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
@@ -51,6 +51,19 @@ const stakedFiatValueBn = computed(() => {
     }
 });
 
+// watch the balances store to update the staked token balance and the system token price
+watch(() => balancesStore.getBalances(label), (balances) => {
+    const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
+    if (stakedTokenBalance) {
+        stakedTokenBalanceBn.value = stakedTokenBalance;
+    }
+    const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
+    if (systemTokenPriceBalance) {
+        systemTokenPrice.value = systemTokenPriceBalance;
+    }
+});
+
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);
@@ -100,7 +113,6 @@ const apyPrittyPrint = computed(() => {
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref($t('evm_stake.unstaking_period'));
 
-// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
 const tvlAmountBn = computed(() => {
     const totalStaking = useRexStore().getRexData(label)?.totalStaking;
     if (totalStaking) {
@@ -111,7 +123,6 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
-// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
 const totalFiatValueBn = computed(() => {
     const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
     const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
diff --git a/src/pages/evm/wallet/SendPage.vue b/src/pages/evm/wallet/SendPage.vue
index 54e345777..761a96f95 100644
--- a/src/pages/evm/wallet/SendPage.vue
+++ b/src/pages/evm/wallet/SendPage.vue
@@ -4,7 +4,7 @@ import AppPage from 'components/evm/AppPage.vue';
 import UserInfo from 'components/evm/UserInfo.vue';
 import { CURRENT_CONTEXT, getAntelope, useAccountStore, useChainStore, useUserStore } from 'src/antelope';
 import { TransactionResponse, TokenClass, TokenBalance, NativeCurrencyAddress, AntelopeError } from 'src/antelope/types';
-import { formatWei, prettyPrintBalance, prettyPrintFiatBalance } from 'src/antelope/stores/utils';
+import { WEI_PRECISION, formatWei, prettyPrintBalance, prettyPrintFiatBalance } from 'src/antelope/stores/utils';
 import { BigNumber, ethers } from 'ethers';
 import CurrencyInput from 'components/evm/inputs/CurrencyInput.vue';
 import AddressInput from 'components/evm/inputs/AddressInput.vue';
@@ -103,11 +103,13 @@ export default defineComponent({
         },
         gasFeeInSystemSym() {
             const symbol = chainStore.loggedChain.settings.getSystemToken().symbol;
-            const gas = `${formatWei(this.estimatedGas.system, 18, 18)}`;
+            const decimals = chainStore.loggedChain.settings.getSystemToken().decimals;
+            const gas = `${formatWei(this.estimatedGas.system, decimals, WEI_PRECISION)}`;
             return prettyPrintBalance(gas, userStore.fiatLocale, this.isMobile, symbol);
         },
         gasFeeInFiat() {
-            const gasFiat = `${formatWei(this.estimatedGas.fiat, 18, 18)}`;
+            const decimals = chainStore.loggedChain.settings.getSystemToken().decimals;
+            const gasFiat = `${formatWei(this.estimatedGas.fiat, decimals, WEI_PRECISION)}`;
             return prettyPrintFiatBalance(gasFiat, userStore.fiatLocale, this.isMobile, userStore.fiatCurrency);
         },
         isMobile(): boolean {
@@ -247,7 +249,7 @@ 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, 18)} ${token.symbol}`;
+                        const quantity = `${formatWei(amount, token.decimals, WEI_PRECISION)} ${token.symbol}`;
                         const address = to.substring(0, 6) + '...' + to.substring(to.length - 4, to.length);
                         const dismiss = ant.config.notifyNeutralMessageHandler(
                             this.$t('notification.neutral_message_sending', { quantity, address }),

From 04d4e3d2ea140174478ebfa282bafcd1ccc5107f Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Tue, 29 Aug 2023 17:30:08 -0400
Subject: [PATCH 159/268] fix capitalization

---
 src/i18n/en-us/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 161bacbd4..ba57fa046 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -202,7 +202,7 @@ export default {
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
         withdrawable_card_label: 'withdrawable',
-        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
+        withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',

From 42c9165baaa32719c0b6ab7a624e524924d4ebf1 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 14:07:23 -0300
Subject: [PATCH 160/268] rebasing with source branch

---
 src/antelope/stores/balances.ts             | 23 +++++++++++++++++++++
 src/antelope/stores/chain.ts                |  2 +-
 src/i18n/en-us/index.js                     |  6 ++----
 src/pages/evm/staking/StakingPageHeader.vue | 17 +++++----------
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 0a6c7a1a0..33c37b4eb 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -51,6 +51,7 @@ import {
 import { AccountModel, EvmAccountModel } from 'src/antelope/stores/account';
 import { EVMAuthenticator } from 'src/antelope/wallets';
 import { filter } from 'rxjs';
+import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
 
 export interface BalancesState {
     __balances:  { [label: Label]: TokenBalance[] };
@@ -182,6 +183,7 @@ export const useBalancesStore = defineStore(store_name, {
                 const chain_settings = chain.getChain(label).settings as EVMChainSettings;
                 const sysToken = chain_settings.getSystemToken();
                 const wrpToken = chain_settings.getWrappedSystemToken();
+                const stkToken = chain_settings.getStakedSystemToken();
 
                 // get the price for both system and wrapped tokens
                 const price = (await chain_settings.getUsdPrice()).toString();
@@ -189,6 +191,27 @@ export const useBalancesStore = defineStore(store_name, {
                 sysToken.market = new TokenMarketData(marketInfo);
                 wrpToken.market = new TokenMarketData(marketInfo);
 
+                // Now we preview a deposit of 1 SYS to get the ratio
+                const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
+
+                const ratio:BigNumber = await chain.getStakedRatio(label);
+                const ratioNumber = ethers.utils.formatUnits(ratio, stkToken.decimals);
+
+                // only if the ratio is not zero, we update the STK token price
+                if (!ratio.isZero() && !ratio.isNegative()) {
+
+                    // Now we calculate the price of 1 STK = (price of 1 SYS) / ratio
+                    const stkPrice = convertCurrency(oneSys, sysToken.decimals, stkToken.decimals, ratioNumber);
+                    const stkPriceNumber = ethers.utils.formatUnits(stkPrice, sysToken.decimals);
+
+                    // Finally we update the STK token price
+                    const stkMarketInfo = { price:stkPriceNumber } as MarketSourceInfo;
+                    // TODO: this is removed until we decide what to do whith the STK token price
+                    // https://github.com/telosnetwork/telos-wallet/issues/544
+                    // stkToken.market = new TokenMarketData(stkMarketInfo);
+                    this.trace('updateSystemTokensPrices', `STLOS price: ${toRaw(stkMarketInfo)}`);
+                }
+
             } catch (error) {
                 console.error(error);
                 // we won't thorw an error here, as it is not critical
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index 9acd20397..0b2ae6545 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -195,7 +195,7 @@ export const useChainStore = defineStore(store_name, {
             // Now we preview a deposit of 1 SYS to get the ratio
             const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
             const stakedRatio:ethers.BigNumber = await contractInstance.previewDeposit(oneSys);
-            const unstakedRatio:ethers.BigNumber = await contractInstance.previewWithdraw(oneSys);
+            const unstakedRatio:ethers.BigNumber = await contractInstance.previewRedeem(oneSys);
 
             // Finally we update the store
             this.setStakedRatio(label, stakedRatio);
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index ba57fa046..e1cafff7b 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 6d2d5bd62..97b34369d 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -26,16 +26,12 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
-const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
-const stakedRatio = computed(() => chainStore.getStakedRatio(label));
-const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
+const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
+const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
-    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
-        console.log('stakedRatio', stakedRatio.value.toString());
-        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
-        console.log('inverseRatio', inverseRatio.toString());
-        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
-        console.log('ratioNumber', ratioNumber);
+    if (stakedTokenBalanceBn.value && !unstakedRatio.value.isZero()) {
+        const ratioNumber = ethers.utils.formatUnits(unstakedRatio.value, stakedToken.decimals);
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -201,9 +197,6 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
-    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
-    <div>{{ stakedRatio?.toString() }}</div>
-
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 5a95a336fc83bc8465e10196fc1b4884a3105d6b Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 161/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index e1cafff7b..ba57fa046 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },

From d9181aa9910299e24b3aeda8dfb91558a22f40c9 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 23 Aug 2023 14:01:24 -0300
Subject: [PATCH 162/268] saving WIP

---
 src/pages/evm/staking/StakingPageHeader.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 97b34369d..ef43bcd68 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -26,12 +26,25 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
+<<<<<<< HEAD
 const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
     if (stakedTokenBalanceBn.value && !unstakedRatio.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(unstakedRatio.value, stakedToken.decimals);
+=======
+const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
+const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
+const stakedExpressedInSystemBalanceBn = computed(() => {
+    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
+        console.log('stakedRatio', stakedRatio.value.toString());
+        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
+        console.log('inverseRatio', inverseRatio.toString());
+        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
+        console.log('ratioNumber', ratioNumber);
+>>>>>>> 8c4d4930 (saving WIP)
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;
@@ -197,6 +210,9 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
+    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
+    <div>{{ stakedRatio?.toString() }}</div>
+
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 177b6c420c5e05fc03dd66aa5db44fff6d66c428 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 24 Aug 2023 20:00:04 -0300
Subject: [PATCH 163/268] Fetching real Rex data for the staking page header

---
 src/pages/evm/staking/StakingPageHeader.vue | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index ef43bcd68..b3ae8c745 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -26,25 +26,12 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
-<<<<<<< HEAD
 const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
     if (stakedTokenBalanceBn.value && !unstakedRatio.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(unstakedRatio.value, stakedToken.decimals);
-=======
-const stakedTokenBalanceBn = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === stakedToken.symbol)?.amount);
-const stakedRatio = computed(() => chainStore.getStakedRatio(label));
-const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || stakedRatio.value.isZero());
-const stakedExpressedInSystemBalanceBn = computed(() => {
-    if (stakedTokenBalanceBn.value && !stakedRatio.value.isZero()) {
-        console.log('stakedRatio', stakedRatio.value.toString());
-        const inverseRatio = ethers.constants.One.mul(ethers.constants.One).div(stakedRatio.value);
-        console.log('inverseRatio', inverseRatio.toString());
-        const ratioNumber = ethers.utils.formatUnits(inverseRatio, stakedToken.decimals);
-        console.log('ratioNumber', ratioNumber);
->>>>>>> 8c4d4930 (saving WIP)
         return convertCurrency(stakedTokenBalanceBn.value, stakedToken.decimals, stakedToken.decimals, ratioNumber);
     } else {
         return undefined;

From 8a850bfe1976da449a75bf3a31757f8d22aedbc1 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 01:03:55 -0300
Subject: [PATCH 164/268] avoiding infinite loading

---
 src/pages/evm/staking/StakingPageHeader.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index b3ae8c745..d50334e40 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -46,8 +46,6 @@ const stakedFiatValueBn = computed(() => {
         return undefined;
     }
 });
-
-// watch the balances store to update the staked token balance and the system token price
 watch(() => balancesStore.getBalances(label), (balances) => {
     const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
     if (stakedTokenBalance) {

From 3c4c94dec517d88f12735ac6ddbadbd7ee71f78e Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 21:45:15 -0300
Subject: [PATCH 165/268] rebase source branch

---
 src/pages/evm/staking/StakingPageHeader.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index d50334e40..fa961e52f 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -195,9 +195,6 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
         <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
     </div>
 
-    <div>{{ stakedTokenBalanceBn?.toString() }}</div>
-    <div>{{ stakedRatio?.toString() }}</div>
-
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 2aeb000f7f631037395795b85022dc3f6b4a0be3 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 22:03:46 -0300
Subject: [PATCH 166/268] avoiding infinite loading by forcing updates

---
 src/antelope/stores/balances.ts             |  7 +++
 src/antelope/stores/rex.ts                  | 11 ++++
 src/pages/evm/staking/StakingPageHeader.vue | 63 ++++++++++++++++++---
 3 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 33c37b4eb..f634b61c2 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -87,6 +87,13 @@ export const useBalancesStore = defineStore(store_name, {
                 await useBalancesStore().updateBalancesForAccount(CURRENT_CONTEXT, useAccountStore().loggedAccount);
             }, 10000);
         },
+        async updateBalances(label: string) {
+            this.trace('updateBalances', label);
+            const account = useAccountStore().getAccount(label);
+            if (account) {
+                await this.updateBalancesForAccount(label, account);
+            }
+        },
         async updateBalancesForAccount(label: string, account: AccountModel | null) {
             this.trace('updateBalancesForAccount', label, account);
             try {
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index f154ed6fd..20964d5ff 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -118,6 +118,17 @@ export const useRexStore = defineStore(store_name, {
             const totalStaking = await contract.totalAssets();
             this.setTotalStaking(label, totalStaking);
         },
+        /**
+         * This method should be called to update the REX data for a given context.
+         * @param label identifies the context (account and network) for the data
+         */
+        async updateRexData(label: string) {
+            this.trace('updateRexData', label);
+            const account = useAccountStore().getAccount(label);
+            if (account) {
+                await this.updateRexDataForAccount(label, account);
+            }
+        },
         /**
          * This method shopuld be called to quiery the REX data for a given account,
          * along with the current stato of the total staked tokens on the system.
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index fa961e52f..b0599c550 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
 import { useUserStore, useBalancesStore, useChainStore, useRexStore } from 'src/antelope';
 import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
-import { NativeCurrencyAddress } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
-import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { WEI_PRECISION } from 'src/antelope/stores/utils';
 
 import ScrollableInfoCards from 'components/evm/ScrollableInfoCards.vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 
 const label = 'current';
 const { t: $t } = useI18n();
@@ -26,7 +28,6 @@ const stakedToken = chainSettings.getStakedSystemToken();
 
 
 // First cell: Staked
-const stakedTokenBalanceBn = ref(undefined as BigNumber | undefined);
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const isStakedLoading = computed(() => stakedTokenBalanceBn.value === undefined || unstakedRatio.value.isZero());
 const stakedExpressedInSystemBalanceBn = computed(() => {
@@ -37,7 +38,6 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-const systemTokenPrice = ref(undefined as BigNumber | undefined);
 const stakedFiatValueBn = computed(() => {
     if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
@@ -46,18 +46,27 @@ const stakedFiatValueBn = computed(() => {
         return undefined;
     }
 });
-watch(() => balancesStore.getBalances(label), (balances) => {
+const stakedTokenBalanceBn = computed(() => {
+    const balances = balancesStore.getBalances(label);
     const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
     if (stakedTokenBalance) {
-        stakedTokenBalanceBn.value = stakedTokenBalance;
+        return stakedTokenBalance;
+    } else {
+        return undefined;
     }
+});
+const systemTokenPrice = computed(() => {
+    const balances = balancesStore.getBalances(label);
     const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
     if (systemTokenPriceBalance) {
-        systemTokenPrice.value = systemTokenPriceBalance;
+        return systemTokenPriceBalance;
+    } else {
+        return undefined;
     }
 });
 
 
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);
@@ -171,6 +180,44 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
+// creatmos un interval que cada 5 segundos verifique si cada uno de los loadings es true o false.
+// por cada loading que encontremos en true, debemos llamar a actualizar las dependendicas de ese loading
+// si todos los loadings son false, entonces podemos parar el intervalo
+
+const intervalTimer = setInterval(() => {
+
+    // is staking still loading?
+    if (isStakedLoading.value) {
+        // if staked balance is still undefined we force the balances update
+        if (stakedTokenBalanceBn.value === undefined) {
+            balancesStore.updateBalances(label);
+        }
+        // if unstaked ratio is still zero we force the chain update
+        if (unstakedRatio.value.isZero()) {
+            chainStore.updateStakedRatio(label);
+        }
+    }
+    // is unstaking still loading?
+    if (isUnstakingLoading.value || isWithdrawableLoading.value) {
+        // we need to update rex data
+        useRexStore().updateRexData(label);
+    }
+    if (apyisLoading.value) {
+        // force apy update
+        chainStore.updateApy(label);
+    }
+
+    if (
+        // we are not in the staking page or...
+        route.path !== '/evm/staking' ||
+        // all loadings are false at the same time
+        (!isStakedLoading.value && !isUnstakingLoading.value && !isWithdrawableLoading.value && !apyisLoading.value)
+    ) {
+        clearInterval(intervalTimer);
+    } else {
+    }
+}, 5000);
+
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
     let decimals = symbol === fiatCurrency.value ? 2 : 4;
     if (!amount || amount.isZero()) {

From 82a5ef17420c761dcdbb4002816f4a7c831e0c34 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 23 Aug 2023 14:01:24 -0300
Subject: [PATCH 167/268] saving WIP

---
 src/pages/evm/staking/StakingPageHeader.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index b0599c550..a4b8f6541 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -237,11 +237,6 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 
 <template>
 <div class="c-staking-header">
-    <div class="text-center q-mb-xl">
-        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
-        <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
-    </div>
-
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From aff537ac2dc5188b6cf229d0e44f7c2e1fadfb1b Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 11:25:05 -0300
Subject: [PATCH 168/268] addressing Erza's feedback

---
 src/antelope/stores/rex.ts                  |  3 +++
 src/pages/evm/staking/StakingPageHeader.vue | 13 +++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 20964d5ff..61f64f066 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -119,6 +119,7 @@ export const useRexStore = defineStore(store_name, {
             this.setTotalStaking(label, totalStaking);
         },
         /**
+<<<<<<< HEAD
          * This method should be called to update the REX data for a given context.
          * @param label identifies the context (account and network) for the data
          */
@@ -130,6 +131,8 @@ export const useRexStore = defineStore(store_name, {
             }
         },
         /**
+=======
+>>>>>>> f90833ad (addressing Erza's feedback)
          * This method shopuld be called to quiery the REX data for a given account,
          * along with the current stato of the total staked tokens on the system.
          * @param label identifies the context (network on this case) for the data
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index a4b8f6541..59d7f8124 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -67,6 +67,19 @@ const systemTokenPrice = computed(() => {
 
 
 
+// watch the balances store to update the staked token balance and the system token price
+watch(() => balancesStore.getBalances(label), (balances) => {
+    const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
+    if (stakedTokenBalance) {
+        stakedTokenBalanceBn.value = stakedTokenBalance;
+    }
+    const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
+    if (systemTokenPriceBalance) {
+        systemTokenPrice.value = systemTokenPriceBalance;
+    }
+});
+
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);

From 2d78876f0b2b959bffbd2a985b3c4992a70b4a1e Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 14:07:23 -0300
Subject: [PATCH 169/268] rebasing with source branch

---
 src/antelope/stores/rex.ts                  |  3 ---
 src/i18n/en-us/index.js                     |  6 ++----
 src/pages/evm/staking/StakingPageHeader.vue | 14 --------------
 3 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 61f64f066..20964d5ff 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -119,7 +119,6 @@ export const useRexStore = defineStore(store_name, {
             this.setTotalStaking(label, totalStaking);
         },
         /**
-<<<<<<< HEAD
          * This method should be called to update the REX data for a given context.
          * @param label identifies the context (account and network) for the data
          */
@@ -131,8 +130,6 @@ export const useRexStore = defineStore(store_name, {
             }
         },
         /**
-=======
->>>>>>> f90833ad (addressing Erza's feedback)
          * This method shopuld be called to quiery the REX data for a given account,
          * along with the current stato of the total staked tokens on the system.
          * @param label identifies the context (network on this case) for the data
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index ba57fa046..e1cafff7b 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 59d7f8124..a0ea81525 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -66,20 +66,6 @@ const systemTokenPrice = computed(() => {
 });
 
 
-
-// watch the balances store to update the staked token balance and the system token price
-watch(() => balancesStore.getBalances(label), (balances) => {
-    const stakedTokenBalance = balances.find(balance => balance.token.symbol === stakedToken.symbol)?.amount;
-    if (stakedTokenBalance) {
-        stakedTokenBalanceBn.value = stakedTokenBalance;
-    }
-    const systemTokenPriceBalance = balances.find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value;
-    if (systemTokenPriceBalance) {
-        systemTokenPrice.value = systemTokenPriceBalance;
-    }
-});
-
-
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);

From 3ddeb6adfe57ca3438f40848f079458022882490 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 170/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index e1cafff7b..ba57fa046 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },

From 606486f4e6f22f4fa979a2909ebad47e59676a12 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 171/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index ba57fa046..e1cafff7b 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },

From 7f8c5c85f91778b6fc9951baced53da8fbc3d404 Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Mon, 4 Sep 2023 03:56:20 -0500
Subject: [PATCH 172/268] fix: card width

---
 src/components/evm/ScrollableInfoCards.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
index d05e600b5..5635d052f 100644
--- a/src/components/evm/ScrollableInfoCards.vue
+++ b/src/components/evm/ScrollableInfoCards.vue
@@ -99,7 +99,7 @@ const props = defineProps<{
         @include sm-and-up {
             width: 300px;
             &--small {
-                width: 220px;
+                width: 250px;
             }
         }
     }

From 5e5ae58b68f73175b8ecd37e6c387de90044b9aa Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 173/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index e1cafff7b..9ff3d231a 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -201,13 +201,23 @@ export default {
         'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
+<<<<<<< HEAD
         withdrawable_card_label: 'withdrawable',
         withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
+=======
+        withdrawable_card_label: 'Withdraw-able',
+        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+>>>>>>> c6dbb950 (adding page header component for Staking Section)
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
+<<<<<<< HEAD
         apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+=======
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
+>>>>>>> c6dbb950 (adding page header component for Staking Section)
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,9 +226,15 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
+<<<<<<< HEAD
         tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
+=======
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
+>>>>>>> c6dbb950 (adding page header component for Staking Section)
     },
     notification:{
         success_title_trx: 'Success',

From d8f0f9126f0dde8300cbcda3e3b4a6941fc86fe8 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 174/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 33 +++++++++++++++------------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 9ff3d231a..1fff53f61 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -201,23 +201,13 @@ export default {
         'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
-<<<<<<< HEAD
         withdrawable_card_label: 'withdrawable',
         withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
-=======
-        withdrawable_card_label: 'Withdraw-able',
-        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
->>>>>>> c6dbb950 (adding page header component for Staking Section)
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-<<<<<<< HEAD
         apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
-=======
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
->>>>>>> c6dbb950 (adding page header component for Staking Section)
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -226,15 +216,18 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-<<<<<<< HEAD
         tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
-=======
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
-        'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
->>>>>>> c6dbb950 (adding page header component for Staking Section)
+        stake_input_label: 'Staking Amount',
+        stake: 'Stake',
+        stake_button_label: 'Stake {systemSymbol} to {stakedSymbol}',
+        stake_sidebar_title: 'Why stake {symbol}?',
+        stake_sidebar_content_fragment_1: 'Staking your TLOS to sTLOS grants you access to',
+        stake_sidebar_content_fragment_2_bold: ' continuous rewards ',
+        stake_sidebar_content_fragment_3: 'and various DeFi applications, further increasing yield. As the reward pool increases, the TLOS to sTLOS conversion rate will change over time. Therefore, the amount of sTLOS received is smaller than the staked TLOS.',
+        stake_sidebar_content_fragment_4_bold: ' Rewards will be auto-compounded. ',
+        stake_sidebar_content_fragment_5: 'No further action is required.',
     },
     notification:{
         success_title_trx: 'Success',
@@ -250,7 +243,7 @@ export default {
         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}</b>',
+        neutral_message_staking: 'Staking <b>{quantity} {symbol}</b>',
         neutral_message_unstaking: 'Unstaking <b>{quantity}</b>',
         neutral_message_revoking: 'Revoking  <b>{symbol}</b> allowance for <b>{address}</b>',
         neutral_message_wrapping: 'Wrapping <b>{quantity} {symbol}</b>',
@@ -536,6 +529,7 @@ export default {
             error_apy: 'Error in getting APY',
             error_invalid_network: 'Invalid network',
             error_no_default_authenticator: 'No default authenticator found',
+            error_no_default_authenticator: 'No default authenticator found',
         },
         account: {
             error_login_native: 'An error has occurred trying to login to the native chain',
@@ -551,6 +545,9 @@ export default {
             error_at_transfer_tokens: 'An error has occurred trying to transfer tokens',
             error_token_contract_not_found: 'Token contract not found for address {address}',
         },
+        rex: {
+            error_contract_not_found: 'Contract not found for address {address}',
+        },
         wallets: {
             error_system_token_transfer_config: 'Error getting Wagmi system token transfer config',
             error_token_transfer_config: 'Error getting Wagmi token transfer config',
@@ -562,4 +559,4 @@ export default {
             error_wrap: 'An unknown error occurred while wrapping system token',
         },
     },
-};
+};
\ No newline at end of file

From d3e9563b38c6873b748eccafdb66efb793d2e7d4 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 175/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 1fff53f61..a76011b5b 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
         stake_input_label: 'Staking Amount',

From 5983eb0f25c50cda4a5b778be4acfcce6da4ebd4 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 176/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index a76011b5b..1fff53f61 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
         stake_input_label: 'Staking Amount',

From f637850fea3dd03a502e68395d901e57a3514b86 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 16:00:26 -0300
Subject: [PATCH 177/268] WIP

---
 src/i18n/en-us/index.js | 42 +----------------------------------------
 1 file changed, 1 insertion(+), 41 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 1fff53f61..773466349 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -189,46 +189,6 @@ export default {
         wrap_input_label: 'Wrapping Amount',
         unwrap_input_label: 'Unwrapping Amount',
     },
-    evm_stake: {
-        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdrawable {token}',
-        staked_card_label: 'Staked {symbol}',
-        staked_card_tooltip: 'Staked tokens:\n\n' +
-        'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
-        'This includes your {stakedSymbol} token balance multiplied by the current exchange rate.',
-        unstaking_card_label: 'Unstaking',
-        unstaking_card_tooltip: 'Unstaking tokens:\n\n' +
-        'This reflects the total value of locked {systemSymbol} in the process of unstaking.\n' +
-        'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
-        'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
-        'During this time you cannot interact with this {systemSymbol}.',
-        withdrawable_card_label: 'withdrawable',
-        withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
-        'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
-        'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
-        'you can withdraw your {systemSymbol} from escrow.',
-        apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
-        'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
-        'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
-        'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
-        unstaking_period_card_label: 'Unstaking Period',
-        unstaking_period_card_tooltip: 'Unstaking Period:\n\n' +
-        'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
-        'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
-        tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
-        'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
-        unstaking_period: '10 days',
-        stake_input_label: 'Staking Amount',
-        stake: 'Stake',
-        stake_button_label: 'Stake {systemSymbol} to {stakedSymbol}',
-        stake_sidebar_title: 'Why stake {symbol}?',
-        stake_sidebar_content_fragment_1: 'Staking your TLOS to sTLOS grants you access to',
-        stake_sidebar_content_fragment_2_bold: ' continuous rewards ',
-        stake_sidebar_content_fragment_3: 'and various DeFi applications, further increasing yield. As the reward pool increases, the TLOS to sTLOS conversion rate will change over time. Therefore, the amount of sTLOS received is smaller than the staked TLOS.',
-        stake_sidebar_content_fragment_4_bold: ' Rewards will be auto-compounded. ',
-        stake_sidebar_content_fragment_5: 'No further action is required.',
-    },
     notification:{
         success_title_trx: 'Success',
         success_title_copied: 'Copied',
@@ -559,4 +519,4 @@ export default {
             error_wrap: 'An unknown error occurred while wrapping system token',
         },
     },
-};
\ No newline at end of file
+};

From e05a87721c94d62a667c3d9d03b1c11f12fd10a8 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 16:00:26 -0300
Subject: [PATCH 178/268] WIP

---
 src/i18n/en-us/index.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 773466349..c49788fe2 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -189,6 +189,13 @@ export default {
         wrap_input_label: 'Wrapping Amount',
         unwrap_input_label: 'Unwrapping Amount',
     },
+    evm_stake: {
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        staked_card_label: 'Staked {symbol}',
+        staked_card_tooltip: 'Staked\n\n' +
+        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_tooltip: 'Unstaking',
+    },
     notification:{
         success_title_trx: 'Success',
         success_title_copied: 'Copied',

From bd0e95205b19056444b29c4942a715b48fcc5473 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 179/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index c49788fe2..29c672cee 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -192,9 +192,34 @@ export default {
     evm_stake: {
         total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
         staked_card_label: 'Staked {symbol}',
-        staked_card_tooltip: 'Staked\n\n' +
-        'This reflects the amount of staked {systemSymbol} tokens associated with the current account. This includes your {wrappedSymbol} token balance multiplied by the current exchange rate.',
-        unstaking_card_tooltip: 'Unstaking',
+        staked_card_tooltip: 'Staked tokens:\n\n' +
+        'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
+        'This includes your {stakedSymbol} token balance multiplied by the current exchange rate.',
+        unstaking_card_label: 'Unstaking',
+        unstaking_card_tooltip: 'Unstaking tokens:\n\n' +
+        'This reflects the total value of locked {systemSymbol} in the process of unstaking.\n' +
+        'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
+        'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
+        'During this time you cannot interact with this {systemSymbol}.',
+        withdrawable_card_label: 'Withdraw-able',
+        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
+        'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
+        'you can withdraw your {systemSymbol} from escrow.',
+        apy_card_label: 'APY',
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
+        'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
+        'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
+        'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
+        unstaking_period_card_label: 'Unstaking Period',
+        unstaking_period_card_tooltip: 'Unstaking Period:\n\n' +
+        'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
+        'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
+        tvl_card_label: 'TVL',
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{
         success_title_trx: 'Success',

From 1824affc77c233a1ecd9acc75eeec24741ca2e59 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 180/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 29c672cee..35245c5d4 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From d85f5052941a3a32bf52a5a1257e40fda3980623 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 181/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 35245c5d4..29c672cee 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
     },
     notification:{

From 15f98c62cb4ba6be791af9b54672f0f8a05ccbc3 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 10:19:53 -0300
Subject: [PATCH 182/268] addressing feedback

---
 src/i18n/en-us/index.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 29c672cee..88f74a223 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -190,7 +190,7 @@ export default {
         unwrap_input_label: 'Unwrapping Amount',
     },
     evm_stake: {
-        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdraw-able {token}',
+        total_of_staked_unstaking_and_withdrawable: 'Total of staked, unstaking, and withdrawable {token}',
         staked_card_label: 'Staked {symbol}',
         staked_card_tooltip: 'Staked tokens:\n\n' +
         'This reflects the total amount of staked {systemSymbol} tokens associated with the current account.\n' +
@@ -201,8 +201,8 @@ export default {
         'When you unstake\u2014i.e. redeem\u2014some {stakedSymbol} tokens, the equivalent \n' +
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
-        withdrawable_card_label: 'Withdraw-able',
-        withdrawable_card_tooltip: 'Withdraw-able tokens:\n\n' +
+        withdrawable_card_label: 'withdrawable',
+        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
@@ -220,6 +220,7 @@ export default {
         tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
         'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
+        unstaking_period: '10 days',
     },
     notification:{
         success_title_trx: 'Success',

From 4f990ecb1a109d594c458c90295fd89eba4c69c5 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 11:25:05 -0300
Subject: [PATCH 183/268] addressing Erza's feedback

---
 src/pages/evm/staking/StakingPageHeader.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index a0ea81525..249b7a7a5 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -65,7 +65,6 @@ const systemTokenPrice = computed(() => {
     }
 });
 
-
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);

From 0c0da5f5feeb132a877ac528f876b260afb94f79 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Tue, 29 Aug 2023 17:30:08 -0400
Subject: [PATCH 184/268] fix capitalization

---
 src/i18n/en-us/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 88f74a223..071b0bc9a 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -202,7 +202,7 @@ export default {
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
         withdrawable_card_label: 'withdrawable',
-        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
+        withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',

From 2d98a501029ba9e94c7afa67553e2a1f8274cae4 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 14:07:23 -0300
Subject: [PATCH 185/268] rebasing with source branch

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 071b0bc9a..3f058f795 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },

From 9baa837027648299dd5134c4546aad44c77abb17 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 186/268] adding page header component for Staking Section

---
 src/i18n/en-us/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3f058f795..071b0bc9a 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },

From abad3cce9ece8b45d458345e24b578b19a0b9e56 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 23 Aug 2023 14:01:24 -0300
Subject: [PATCH 187/268] saving WIP

---
 src/pages/evm/staking/StakingPageHeader.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 249b7a7a5..a4b8f6541 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -65,6 +65,8 @@ const systemTokenPrice = computed(() => {
     }
 });
 
+
+
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);

From 914b216355e56ab6314ca466001ef9b4591486e8 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 22 Aug 2023 16:38:41 -0300
Subject: [PATCH 188/268] saving WIP

---
 src/i18n/en-us/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 071b0bc9a..077c2e367 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -522,7 +522,6 @@ export default {
             error_apy: 'Error in getting APY',
             error_invalid_network: 'Invalid network',
             error_no_default_authenticator: 'No default authenticator found',
-            error_no_default_authenticator: 'No default authenticator found',
         },
         account: {
             error_login_native: 'An error has occurred trying to login to the native chain',

From aa02264fb5d11c202a96c8bcca5d992d936e27f4 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 24 Aug 2023 20:00:04 -0300
Subject: [PATCH 189/268] Fetching real Rex data for the staking page header

---
 src/pages/evm/staking/StakingPageHeader.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index a4b8f6541..5ad34d7c9 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -38,6 +38,10 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
+<<<<<<< HEAD
+=======
+const systemTokenPrice = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value);
+>>>>>>> 4865998c (Fetching real Rex data for the staking page header)
 const stakedFiatValueBn = computed(() => {
     if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
@@ -116,6 +120,10 @@ const apyPrittyPrint = computed(() => {
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref($t('evm_stake.unstaking_period'));
 
+<<<<<<< HEAD
+=======
+// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
+>>>>>>> 4865998c (Fetching real Rex data for the staking page header)
 const tvlAmountBn = computed(() => {
     const totalStaking = useRexStore().getRexData(label)?.totalStaking;
     if (totalStaking) {
@@ -125,6 +133,7 @@ const tvlAmountBn = computed(() => {
     }
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
+<<<<<<< HEAD
 
 const totalFiatValueBn = computed(() => {
     const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
@@ -132,6 +141,8 @@ const totalFiatValueBn = computed(() => {
     const withdrawableFiatValue = withdrawableFiatValueBn.value ?? BigNumber.from(0);
     return stakedFiatValue.add(unstakingFiatValue).add(withdrawableFiatValue);
 });
+=======
+>>>>>>> 4865998c (Fetching real Rex data for the staking page header)
 
 const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),

From 03a55e5d3602049ae81347d6f3a7e0253d2277ba Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 10:19:53 -0300
Subject: [PATCH 190/268] addressing feedback

---
 src/pages/evm/staking/StakingPageHeader.vue | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 5ad34d7c9..a4b8f6541 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -38,10 +38,6 @@ const stakedExpressedInSystemBalanceBn = computed(() => {
         return undefined;
     }
 });
-<<<<<<< HEAD
-=======
-const systemTokenPrice = computed(() => balancesStore.getBalances(label).find(balance => balance.token.symbol === systemToken.symbol)?.token.price.value);
->>>>>>> 4865998c (Fetching real Rex data for the staking page header)
 const stakedFiatValueBn = computed(() => {
     if (stakedExpressedInSystemBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
@@ -120,10 +116,6 @@ const apyPrittyPrint = computed(() => {
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 const unlockPeriod = ref($t('evm_stake.unstaking_period'));
 
-<<<<<<< HEAD
-=======
-// tvlAmountBn is a BigNumber representing 10 ETH (or 10 TLOS) with WEI_PRECISION decimals
->>>>>>> 4865998c (Fetching real Rex data for the staking page header)
 const tvlAmountBn = computed(() => {
     const totalStaking = useRexStore().getRexData(label)?.totalStaking;
     if (totalStaking) {
@@ -133,7 +125,6 @@ const tvlAmountBn = computed(() => {
     }
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
-<<<<<<< HEAD
 
 const totalFiatValueBn = computed(() => {
     const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
@@ -141,8 +132,6 @@ const totalFiatValueBn = computed(() => {
     const withdrawableFiatValue = withdrawableFiatValueBn.value ?? BigNumber.from(0);
     return stakedFiatValue.add(unstakingFiatValue).add(withdrawableFiatValue);
 });
-=======
->>>>>>> 4865998c (Fetching real Rex data for the staking page header)
 
 const firstLineData = computed(() => [{
     label: $t('evm_stake.staked_card_label', { symbol: systemToken.symbol }),

From a49a9d7ad96b3d14e53420c2c928708faa512a06 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 11:25:05 -0300
Subject: [PATCH 191/268] addressing Erza's feedback

---
 src/pages/evm/staking/StakingPageHeader.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index a4b8f6541..249b7a7a5 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -65,8 +65,6 @@ const systemTokenPrice = computed(() => {
     }
 });
 
-
-
 // Second cell: Unstaking
 const unstakingBalanceBn = computed(() => {
     const rexData = useRexStore().getRexData(label);

From eac3afa7f0907f7bb3ea925f4e4d38058ccd815d Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 14:07:23 -0300
Subject: [PATCH 192/268] rebasing with source branch

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 077c2e367..0b64fc79a 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },

From 4f1ed782b71a0057ed86c7e08401e3efb94434f2 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 17 Aug 2023 23:36:59 -0300
Subject: [PATCH 193/268] adding page header component for Staking Section

---
 src/components/evm/AppNav.vue | 8 --------
 src/i18n/en-us/index.js       | 6 ++++--
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index a7e94624c..d7ac4b84f 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -290,14 +290,6 @@ export default defineComponent({
                     aria-hidden="true"
                 />
                 {{ $t('nav.staking') }}
-                <span class="c-app-nav__apy-box">  {{ $t('evm_stake.apy_card_label') }}
-                    <q-spinner
-                        v-if="isLoadingApy"
-                        color="white"
-                        class="c-app-nav__apy-spinner"
-                    />
-                    <b> {{ prettyPrintApy }}</b>
-                </span>
             </li>
 
             <li
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 0b64fc79a..077c2e367 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,7 +207,8 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
+        'The annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -216,7 +217,8 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
+        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },

From 80f07485352ec23f6b273b95aac18a64a2bdb7ca Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Fri, 18 Aug 2023 17:05:36 -0400
Subject: [PATCH 194/268] update tooltip based on meeting discussion

---
 src/i18n/en-us/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 077c2e367..0b64fc79a 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -207,8 +207,7 @@ export default {
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
         apy_card_label: 'APY',
-        apy_card_tooltip: 'APY: Annual Percentage Yield\n\n' +
-        'The annual rate of return after taking compound interest into account.\n' +
+        apy_card_tooltip: 'Annual Percentage Yield (APY) is the annual rate of return after taking compound interest into account.\n' +
         'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that\n' +
         'it will change over time with the total amount of {systemSymbol} staked across Telos EVM and Native.\n' +
         'Rewards are disbursed from a community rewards pool into the {stakedSymbol} contract.',
@@ -217,8 +216,7 @@ export default {
         'If you unstake some {stakedSymbol} tokens you need to wait for the Unstaking Period,\n' +
         'which is the amount of time that must pass before you can withdraw your {systemSymbol} from escrow.\n',
         tvl_card_label: 'TVL',
-        tvl_card_tooltip: 'TVL: Total Value Locked\n\n' +
-        'The current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
+        tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
     },

From bee6c75f776dfeedca9e946cddac56ef370e2cae Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 29 Aug 2023 10:19:53 -0300
Subject: [PATCH 195/268] addressing feedback

---
 src/antelope/chains/EVMChainSettings.ts     |  4 ++++
 src/i18n/en-us/index.js                     |  4 ++++
 src/pages/evm/staking/StakingPageHeader.vue | 15 +++++++++++++++
 3 files changed, 23 insertions(+)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 504cc0ca7..86c6b57ce 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -392,7 +392,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      * @param contract contract instance to be cached
      */
+<<<<<<< HEAD
     addContract(address: string, contract: EvmContract | false) {
+=======
+    addContract(address: string, contract: EvmContract) {
+>>>>>>> 958b7ab3 (addressing feedback)
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
             this.contracts[key] = {
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 0b64fc79a..40095c241 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -202,7 +202,11 @@ export default {
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
         withdrawable_card_label: 'withdrawable',
+<<<<<<< HEAD
         withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
+=======
+        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
+>>>>>>> 958b7ab3 (addressing feedback)
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 249b7a7a5..5147d12bc 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -124,6 +124,10 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
+<<<<<<< HEAD
+=======
+// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
+>>>>>>> 958b7ab3 (addressing feedback)
 const totalFiatValueBn = computed(() => {
     const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
     const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
@@ -178,6 +182,7 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
+<<<<<<< HEAD
 // creatmos un interval que cada 5 segundos verifique si cada uno de los loadings es true o false.
 // por cada loading que encontremos en true, debemos llamar a actualizar las dependendicas de ese loading
 // si todos los loadings son false, entonces podemos parar el intervalo
@@ -216,6 +221,8 @@ const intervalTimer = setInterval(() => {
     }
 }, 5000);
 
+=======
+>>>>>>> 958b7ab3 (addressing feedback)
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
     let decimals = symbol === fiatCurrency.value ? 2 : 4;
     if (!amount || amount.isZero()) {
@@ -235,6 +242,14 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 
 <template>
 <div class="c-staking-header">
+<<<<<<< HEAD
+=======
+    <div class="text-center q-mb-xl">
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
+        <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
+    </div>
+
+>>>>>>> 958b7ab3 (addressing feedback)
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 33fc5adc78f831b88d28234a776d160364b51eeb Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 31 Aug 2023 11:25:05 -0300
Subject: [PATCH 196/268] addressing Erza's feedback

---
 src/antelope/chains/EVMChainSettings.ts     |  4 ----
 src/pages/evm/staking/StakingPageHeader.vue | 15 ---------------
 2 files changed, 19 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 86c6b57ce..504cc0ca7 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -392,11 +392,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
      * @param address address of the contract
      * @param contract contract instance to be cached
      */
-<<<<<<< HEAD
     addContract(address: string, contract: EvmContract | false) {
-=======
-    addContract(address: string, contract: EvmContract) {
->>>>>>> 958b7ab3 (addressing feedback)
         const key = address.toLowerCase();
         if (!this.contracts[key]) {
             this.contracts[key] = {
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 5147d12bc..249b7a7a5 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -124,10 +124,6 @@ const tvlAmountBn = computed(() => {
 });
 const evmNetworkName = computed(() => chainStore.currentEvmChain?.settings.getDisplay() ?? '');
 
-<<<<<<< HEAD
-=======
-// stakedFiatValueBn + unstakingFiatValueBn + isWithdrawableLoading
->>>>>>> 958b7ab3 (addressing feedback)
 const totalFiatValueBn = computed(() => {
     const stakedFiatValue = stakedFiatValueBn.value ?? BigNumber.from(0);
     const unstakingFiatValue = unstakingFiatValueBn.value ?? BigNumber.from(0);
@@ -182,7 +178,6 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
-<<<<<<< HEAD
 // creatmos un interval que cada 5 segundos verifique si cada uno de los loadings es true o false.
 // por cada loading que encontremos en true, debemos llamar a actualizar las dependendicas de ese loading
 // si todos los loadings son false, entonces podemos parar el intervalo
@@ -221,8 +216,6 @@ const intervalTimer = setInterval(() => {
     }
 }, 5000);
 
-=======
->>>>>>> 958b7ab3 (addressing feedback)
 function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
     let decimals = symbol === fiatCurrency.value ? 2 : 4;
     if (!amount || amount.isZero()) {
@@ -242,14 +235,6 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 
 <template>
 <div class="c-staking-header">
-<<<<<<< HEAD
-=======
-    <div class="text-center q-mb-xl">
-        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
-        <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
-    </div>
-
->>>>>>> 958b7ab3 (addressing feedback)
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From 9090afbd1c3a6b7d595f2c55c27d5f1a3728a69a Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 19:38:17 -0300
Subject: [PATCH 197/268] save WIP - staking tab

---
 src/antelope/stores/rex.ts                  |  13 +-
 src/components/ConversionRateBadge.vue      |   7 +-
 src/components/evm/inputs/CurrencyInput.vue |  14 +-
 src/i18n/en-us/index.js                     |  13 +-
 src/pages/evm/staking/StakingPage.vue       |   3 +-
 src/pages/evm/staking/StakingTab.vue        | 264 ++++++++++++++++++++
 src/pages/evm/wrap/UnwrapTab.vue            |   1 +
 src/pages/evm/wrap/WrapTab.vue              |   1 +
 8 files changed, 301 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/evm/staking/StakingTab.vue

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 20964d5ff..39dbb148a 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -13,7 +13,7 @@ import {
     createTraceFunction,
     useFeedbackStore,
 } from 'src/antelope/stores/feedback';
-import { AntelopeError, Label } from 'src/antelope/types';
+import { AntelopeError, Label, TransactionResponse } from 'src/antelope/types';
 import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
 import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
@@ -187,9 +187,20 @@ export const useRexStore = defineStore(store_name, {
             const balance = await contract.balanceOf(address);
             this.setBalance(label, balance);
         },
+        /**
+         * utility method to get the number of decimals for the staked system token
+         * @returns the number of decimals for the staked system token
+         */
         getStakingDecimals() {
             return useChainStore().currentEvmChain?.settings.getStakedSystemToken().decimals || WEI_PRECISION;
         },
+        // transactions ----------
+        async stakeSystemTokens(label: string, amount: ethers.BigNumber): Promise<TransactionResponse> {
+            // TODO: implement
+            console.error('stakeSystemTokens not implemented yet');
+            this.trace('stakeSystemTokens', label, amount);
+            return {} as TransactionResponse;
+        },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
             const num = parseFloat(ethers.utils.formatUnits(withdrawable, this.getStakingDecimals()));
diff --git a/src/components/ConversionRateBadge.vue b/src/components/ConversionRateBadge.vue
index 4b35ef743..b74f4fc75 100644
--- a/src/components/ConversionRateBadge.vue
+++ b/src/components/ConversionRateBadge.vue
@@ -11,17 +11,20 @@ const props = defineProps<{
     tokenTwoSymbol: string;
     tokenTwoAmount: BigNumber; // the amount of token two in a single token one
     tokenTwoDecimals: number; // the number of decimals in token two, e.g. 18 for ETH
+    decimals: number; // abbreviate should be false in order to display decimals
 }>();
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
 
 const label = computed(() => {
+    console.log('label computed: ', props.tokenOneSymbol, props.tokenTwoSymbol, props.tokenTwoAmount.toString(), fiatLocale.value, props.tokenTwoDecimals);
+    const abbreviate = props.decimals === 0;
     const prettyTokenTwoAmount = prettyPrintCurrency(
         props.tokenTwoAmount,
-        4,
+        props.decimals ?? 2,
         fiatLocale.value,
-        true,
+        abbreviate,
         props.tokenTwoSymbol,
         false,
         props.tokenTwoDecimals,
diff --git a/src/components/evm/inputs/CurrencyInput.vue b/src/components/evm/inputs/CurrencyInput.vue
index 793c57f81..bb8e82b80 100644
--- a/src/components/evm/inputs/CurrencyInput.vue
+++ b/src/components/evm/inputs/CurrencyInput.vue
@@ -328,12 +328,12 @@ export default defineComponent({
         },
 
         primaryCurrencyDisplayPrecision() {
-            // if the value represents fiat, show 2 decimals; else show 4
-            return this.decimals === 2 ? 2 : 4;
+            // if the value represents fiat, show 2 decimals; else show this.decimalsToDisplay
+            return this.decimals === 2 ? 2 : this.decimalsToDisplay;
         },
         secondaryCurrencyDisplayPrecision() {
-            // if the value represents fiat, show 2 decimals; else show 4
-            return this.secondaryCurrencyDecimals === 2 ? 2 : 4;
+            // if the value represents fiat, show 2 decimals; else show this.decimalsToDisplay
+            return this.secondaryCurrencyDecimals === 2 ? 2 : this.decimalsToDisplay;
         },
         leadingZeroesRegex(): RegExp {
             const leadingZeroesPattern = `^0+(?!$|\\${this.decimalSeparator})`;
@@ -427,7 +427,7 @@ export default defineComponent({
                             true,
                         );
                     } else {
-                        const decimalsToShow = formatUnits(newValue, this.decimals).split('.')[1].length;
+                        const decimalsToShow = this.decimalsToDisplay;
                         newInputValue = prettyPrintCurrency(
                             newValue,
                             decimalsToShow,
@@ -937,9 +937,9 @@ export default defineComponent({
 
 <template>
 <div
-    :id="$attrs.id"
+    :id="($attrs.id as string)"
     :class="{
-        [$attrs.class]: !!$attrs.class,
+        [$attrs.class as string]: !!$attrs.class,
         'c-currency-input': true,
         'c-currency-input--error': !!visibleErrorText,
         'c-currency-input--readonly': !!inputElementAttrs.readonly,
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 40095c241..99156a4b2 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -202,11 +202,7 @@ export default {
         'amount of {systemSymbol} is sent into escrow ("locked") for {unlockPeriod}.\n\n' +
         'During this time you cannot interact with this {systemSymbol}.',
         withdrawable_card_label: 'withdrawable',
-<<<<<<< HEAD
         withdrawable_card_tooltip: 'Withdrawable Tokens:\n\n' +
-=======
-        withdrawable_card_tooltip: 'withdrawable tokens:\n\n' +
->>>>>>> 958b7ab3 (addressing feedback)
         'This reflects the total amount of {systemSymbol} that were previously unstaked\n' +
         'and are now available for withdrawal. Once the {unlockPeriod} has passed,\n' +
         'you can withdraw your {systemSymbol} from escrow.',
@@ -223,6 +219,15 @@ export default {
         tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
+        stake_input_label: 'Staking Amount',
+        stake: 'Stake',
+        stake_button_label: 'Stake {systemSymbol} to {stakedSymbol}',
+        stake_sidebar_title: 'Why stake {symbol}?',
+        stake_sidebar_content_fragment_1: 'Staking your TLOS to sTLOS grants you access to',
+        stake_sidebar_content_fragment_2_bold: ' continuous rewards ',
+        stake_sidebar_content_fragment_3: 'and various DeFi applications, further increasing yield. As the reward pool increases, the TLOS to sTLOS conversion rate will change over time. Therefore, the amount of sTLOS received is smaller than the staked TLOS.',
+        stake_sidebar_content_fragment_4_bold: ' Rewards will be auto-compounded. ',
+        stake_sidebar_content_fragment_5: 'No further action is required.',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index e5ac5b327..374dd8eef 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AppPage from 'components/evm/AppPage.vue';
 import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
+import StakingTab from 'pages/evm/staking/StakingTab.vue';
 
 const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
@@ -12,7 +13,7 @@ const tabs = ['stake', 'unstake', 'withdraw'];
     </template>
 
     <template v-slot:stake>
-        <p>stake tab</p>
+        <StakingTab />
     </template>
 
     <template v-slot:unstake>
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
new file mode 100644
index 000000000..c37bce9e0
--- /dev/null
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ethers } from 'ethers';
+
+import {
+    getAntelope,
+    useAccountStore,
+    useBalancesStore,
+    useChainStore,
+    useRexStore,
+    useUserStore,
+} from 'src/antelope';
+
+import EVMSidebarPage from 'src/layouts/EVMSidebarPage.vue';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
+import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { AntelopeError } from 'src/antelope/types';
+
+const label = 'current';
+
+const { t: $t } = useI18n();
+const uiDecimals = 2;
+const ant = getAntelope();
+const chainStore = useChainStore();
+const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
+const userStore = useUserStore();
+const balanceStore = useBalancesStore();
+const accountStore = useAccountStore();
+
+const systemToken = chainSettings.getSystemToken();
+const systemTokenSymbol = systemToken.symbol;
+const systemTokenDecimals = systemToken.decimals;
+const stakedToken = chainSettings.getStakedSystemToken();
+const stakedTokenSymbol = stakedToken.symbol;
+const stakedTokenDecimals = stakedToken.decimals;
+
+
+// data
+const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
+const inputModelValue = ref(ethers.constants.Zero);
+const estimatedGas = ref(ethers.constants.Zero);
+const stakedRatio = computed(() => {
+    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
+    return chainStore.getStakedRatio(label);
+});
+const outputModelValue = computed(() => {
+    if (stakedRatio.value.isZero()) {
+        return ethers.constants.Zero;
+    }
+    const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
+    console.log('outputModelValue computed: ', output.toString());
+    return output;
+});
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
+    balance => balance.token.contract === systemToken.address)[0],
+);
+const systemTokenFiatPrice = computed(() => systemTokenBalanceInfo.value?.token.price.getAmountInFiatStr(1) ?? '1');
+const systemTokenBalance = computed(() => systemTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
+const sidebarContent = computed(() => {
+    const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
+    const content = [{
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_1',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_2_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_3',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_4_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_5',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }];
+
+    return {
+        header,
+        content,
+    };
+});
+const availableTostake = computed(() => {
+    const available = systemTokenBalance.value.sub(estimatedGas.value);
+
+    if (available.lt(0)) {
+        return ethers.constants.Zero;
+    }
+    return available;
+});
+const formIsValid = computed(() =>
+    !inputModelValue.value.isZero() &&
+    inputModelValue.value.lt(availableTostake.value),
+);
+const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeSystemTokens'));
+
+
+// methods
+onBeforeMount(() => {
+    // https://github.com/telosnetwork/telos-wallet/issues/274
+    const GAS_FOR_stakePING_TOKEN = 55500;
+    chainSettings.getEstimatedGas(GAS_FOR_stakePING_TOKEN).then((gas) => {
+        estimatedGas.value = gas.system;
+    });
+});
+
+async function handleCtaClick() {
+    const label = 'logged';
+    if (!await accountStore.isConnectedToCorrectNetwork(label)) {
+        const networkName = useChainStore().loggedChain.settings.getDisplay();
+        const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
+
+        ant.config.notifyFailureWithAction(errorMessage, {
+            label: ant.config.localizationHandler('evm_wallet.switch'),
+        });
+
+        return;
+    }
+
+    if (formIsValid.value) {
+        try {
+            const tx = await useRexStore().stakeSystemTokens(label, inputModelValue.value);
+            const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
+
+            const dismiss = ant.config.notifyNeutralMessageHandler(
+                $t('notification.neutral_message_stakeping', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+            );
+
+            tx.wait().then(() => {
+                ant.config.notifySuccessfulTrxHandler(
+                    `${chainSettings.getExplorerUrl()}/tx/${tx.hash}`,
+                );
+            }).catch((err) => {
+                console.error(err);
+            }).finally(() => {
+                dismiss();
+            });
+        } catch (err) {
+            console.error(err);
+            if (err instanceof AntelopeError) {
+                const evmErr = err as AntelopeError;
+                ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
+            } else {
+                ant.config.notifyFailureMessage($t('evm_wallet.general_error'));
+            }
+        }
+    }
+}
+</script>
+
+<template>
+<EVMSidebarPage :sidebar-content="sidebarContent">
+
+    <!-- convert ratio 1:stakedRatio -->
+    <div class="row q-mb-xl">
+        <div class="col-12">
+            <div class="c-stake-tab__badge-container">
+                <ConversionRateBadge
+                    :token-one-symbol="systemTokenSymbol"
+                    :token-two-symbol="stakedTokenSymbol"
+                    :token-two-decimals="systemTokenDecimals"
+                    :token-two-amount="stakedRatio"
+                    :decimals="uiDecimals"
+                />
+            </div>
+        </div>
+    </div>
+
+    <!-- TLOS input -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="inputModelValue"
+                :symbol="systemTokenSymbol"
+                :decimals="systemTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :secondary-currency-code="fiatCurrency"
+                :secondary-currency-decimals="2"
+                :secondary-currency-conversion-factor="systemTokenFiatPrice"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                :max-value="availableTostake"
+                class="c-stake-tab__input"
+            />
+        </div>
+    </div>
+
+    <!-- arrow -->
+    <div class="row q-mb-sm">
+        <div class="col-12 text-center">
+            <img
+                src="~assets/icon--arrow-down.svg"
+                :alt="$t('global.arrow_icon_alt')"
+                height="20"
+                width="18"
+            >
+        </div>
+    </div>
+
+    <!-- output field (readonly) -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="outputModelValue"
+                :symbol="stakedTokenSymbol"
+                :decimals="stakedTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                class="c-stake-tab__input"
+                readonly="readonly"
+            />
+        </div>
+    </div>
+
+    <!-- stake button -->
+    <div class="row">
+        <div class="col-12">
+            <div class="c-stake-tab__cta-container">
+                <q-btn
+                    color="primary"
+                    :disable="!formIsValid"
+                    :loading="ctaIsLoading"
+                    :label="$t('evm_stake.stake')"
+                    :aria-label="$t(
+                        'evm_stake.stake_button_label',
+                        { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+                    )"
+                    @click="handleCtaClick"
+                />
+            </div>
+        </div>
+    </div>
+</EVMSidebarPage>
+</template>
+
+<style lang="scss">
+.c-stake-tab {
+    &__badge-container,
+    &__cta-container,
+    &__input {
+        max-width: 320px;
+        margin: auto;
+    }
+
+    &__badge-container,
+    &__cta-container {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+</style>
diff --git a/src/pages/evm/wrap/UnwrapTab.vue b/src/pages/evm/wrap/UnwrapTab.vue
index 1f04ab8dd..05659e389 100644
--- a/src/pages/evm/wrap/UnwrapTab.vue
+++ b/src/pages/evm/wrap/UnwrapTab.vue
@@ -124,6 +124,7 @@ async function handleUnwrapClick() {
                     :token-two-symbol="systemTokenSymbol"
                     :token-two-decimals="systemTokenDecimals"
                     :token-two-amount="oneEth"
+                    :decimals="0"
                 />
             </div>
         </div>
diff --git a/src/pages/evm/wrap/WrapTab.vue b/src/pages/evm/wrap/WrapTab.vue
index bd888f44e..0ae81b2a0 100644
--- a/src/pages/evm/wrap/WrapTab.vue
+++ b/src/pages/evm/wrap/WrapTab.vue
@@ -141,6 +141,7 @@ async function handleCtaClick() {
                     :token-two-symbol="systemTokenSymbol"
                     :token-two-decimals="systemTokenDecimals"
                     :token-two-amount="oneEth"
+                    :decimals="0"
                 />
             </div>
         </div>

From ec51d1678e9875660316263a4e9d6b5789626ad5 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sun, 3 Sep 2023 13:53:59 -0300
Subject: [PATCH 198/268] Staking tab fully functional

---
 src/antelope/stores/balances.ts               |   1 +
 src/antelope/stores/rex.ts                    |  55 +++-
 src/antelope/stores/utils/trx-utils.ts        |  29 ++
 .../authenticators/EVMAuthenticator.ts        |   3 +
 .../authenticators/InjectedProviderAuth.ts    |  38 ++-
 .../wallets/authenticators/OreIdAuth.ts       |  13 +
 .../authenticators/WalletConnectAuth.ts       |  12 +
 src/components/evm/inputs/CurrencyInput.vue   |   9 +-
 src/i18n/en-us/index.js                       |   1 +
 src/pages/evm/staking/StakingTab.vue          |  13 +-
 src/pages/evm/staking/UnstakingTab.vue        | 258 ++++++++++++++++++
 test/jest/utils/antelope/index.ts             |   1 +
 test/jest/utils/antelope/mockData.ts          |   2 +
 test/jest/utils/antelope/store-chain.ts       |   4 +
 test/jest/utils/antelope/store-utils.ts       |  12 +
 15 files changed, 429 insertions(+), 22 deletions(-)
 create mode 100644 src/antelope/stores/utils/trx-utils.ts
 create mode 100644 src/pages/evm/staking/UnstakingTab.vue
 create mode 100644 test/jest/utils/antelope/store-utils.ts

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index f634b61c2..f36f60c97 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -52,6 +52,7 @@ import { AccountModel, EvmAccountModel } from 'src/antelope/stores/account';
 import { EVMAuthenticator } from 'src/antelope/wallets';
 import { filter } from 'rxjs';
 import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
+import { subscribeForTransactionReceipt } from 'src/antelope/stores/utils/trx-utils';
 
 export interface BalancesState {
     __balances:  { [label: Label]: TokenBalance[] };
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 39dbb148a..aa686e116 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -16,10 +16,10 @@ import {
 import { AntelopeError, Label, TransactionResponse } from 'src/antelope/types';
 import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
-import { getAntelope, useChainStore, useEVMStore } from 'src/antelope';
+import { getAntelope, useBalancesStore, useChainStore, useEVMStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION } from 'src/antelope/stores/utils';
-
+import { subscribeForTransactionReceipt } from 'src/antelope/stores/utils/trx-utils';
 
 
 export interface EvmRexDeposit {
@@ -85,7 +85,7 @@ export const useRexStore = defineStore(store_name, {
             const contract = await useEVMStore().getContract(authenticator, address);
             if (!contract) {
                 this.trace('getStakedSystemContractInstance', label, '-> no contract');
-                throw new AntelopeError('antelope.chain.error_no_default_authenticator');
+                throw new AntelopeError('antelope.rex.error_contract_not_found', { address });
             }
             const contractInstance = await contract.getContractInstance();
             return contractInstance;
@@ -188,18 +188,55 @@ export const useRexStore = defineStore(store_name, {
             this.setBalance(label, balance);
         },
         /**
-         * utility method to get the number of decimals for the staked system token
+         * utility function to get the number of decimals for the staked system token
          * @returns the number of decimals for the staked system token
          */
         getStakingDecimals() {
             return useChainStore().currentEvmChain?.settings.getStakedSystemToken().decimals || WEI_PRECISION;
         },
         // transactions ----------
-        async stakeSystemTokens(label: string, amount: ethers.BigNumber): Promise<TransactionResponse> {
-            // TODO: implement
-            console.error('stakeSystemTokens not implemented yet');
-            this.trace('stakeSystemTokens', label, amount);
-            return {} as TransactionResponse;
+        /**
+         * This methos sould be called by any transaction performed by this store. It subscribes to the transaction
+         * receipt and updates the balance and rex status for the account if the transaction is successful.
+         * @param account account performing the transaction
+         * @param response the transaction response holding the hash
+         * @returns the same transaction response but modified by the utility function subscribeForTransactionReceipt
+         */
+        async subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<TransactionResponse> {
+            this.trace('subscribeForTransactionReceipt', account.account, response.hash);
+            subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
+                this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
+                if (receipt.status === 1) {
+                    this.updateRexDataForAccount('logged', account);
+                    useBalancesStore().updateBalancesForAccount('logged', account);
+                }
+                return receipt;
+            });
+            return response;
+        },
+        /**
+         * Performs the staking of System Tokens for a giuven account on the REX system of a given network.
+         * @param label identifies the context (account-network) for the data
+         * @param amount the amount of tokens to stake
+         * @returns the transaction response holding the hash and a wait method to subscribe to the transaction receipt
+         */
+        async stakeEVMSystemTokens(label: string, amount: ethers.BigNumber): Promise<TransactionResponse> {
+            const funcname = 'stakeEVMSystemTokens';
+            this.trace(funcname, label, amount.toString());
+
+            try {
+                useFeedbackStore().setLoading(funcname);
+                const account = useAccountStore().getAccount(label);
+                const authenticator = useAccountStore().getEVMAuthenticator(label);
+                return await authenticator.stakeSystemTokens(amount)
+                    .then(r => this.subscribeForTransactionReceipt(account, r as TransactionResponse));
+            } catch (error) {
+                const trxError = getAntelope().config.wrapError('antelope.evm.error_wrap_failed', error);
+                getAntelope().config.transactionErrorHandler(trxError, funcname);
+                throw trxError;
+            } finally {
+                useFeedbackStore().unsetLoading(funcname);
+            }
         },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
diff --git a/src/antelope/stores/utils/trx-utils.ts b/src/antelope/stores/utils/trx-utils.ts
new file mode 100644
index 000000000..9d7305fa0
--- /dev/null
+++ b/src/antelope/stores/utils/trx-utils.ts
@@ -0,0 +1,29 @@
+import { usePlatformStore } from 'src/antelope';
+import { ethers } from 'ethers';
+import { AccountModel } from 'src/antelope/stores/account';
+import { AntelopeError, TransactionResponse } from 'src/antelope/types';
+import { EVMAuthenticator } from 'src/antelope/wallets';
+
+
+export async function subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<ethers.providers.TransactionReceipt> {
+    if (account.isNative) {
+        throw new AntelopeError('Not implemented yet for native');
+    } else {
+        const authenticator = account.authenticator as EVMAuthenticator;
+        const provider = await authenticator.web3Provider();
+        if (provider) {
+            const whenConfirmed = provider.waitForTransaction(response.hash);
+            // we add the wait method to the response,
+            // so that the caller can subscribe to the confirmation event
+            response.wait = async () => whenConfirmed;
+            return whenConfirmed;
+        } else {
+            if (usePlatformStore().isMobile) {
+                response.wait = async () => Promise.resolve({} as ethers.providers.TransactionReceipt);
+                return Promise.resolve({} as ethers.providers.TransactionReceipt);
+            } else {
+                throw new AntelopeError('antelope.evm.error_no_provider');
+            }
+        }
+    }
+}
diff --git a/src/antelope/wallets/authenticators/EVMAuthenticator.ts b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
index 9dca55135..b80989335 100644
--- a/src/antelope/wallets/authenticators/EVMAuthenticator.ts
+++ b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
@@ -10,6 +10,7 @@ import { usePlatformStore } from 'src/antelope/stores/platform';
 import { AntelopeError, EvmTransactionResponse, ExceptionError, TokenClass, addressString } from 'src/antelope/types';
 
 export abstract class EVMAuthenticator {
+
     readonly label: string;
     readonly trace: (message: string, ...args: unknown[]) => void;
 
@@ -27,6 +28,8 @@ export abstract class EVMAuthenticator {
     abstract prepareTokenForTransfer(token: TokenClass | null, amount: BigNumber, to: string): Promise<void>;
     abstract wrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
     abstract unwrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
+    abstract stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
+    abstract unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
     abstract isConnectedTo(chainId: string): Promise<boolean>;
     abstract externalProvider(): Promise<ethers.providers.ExternalProvider>;
     abstract web3Provider(): Promise<ethers.providers.Web3Provider>;
diff --git a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
index 8fb65a952..b9989004c 100644
--- a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
+++ b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
@@ -2,7 +2,7 @@
 
 import { BigNumber, ethers } from 'ethers';
 import { BehaviorSubject, filter, map } from 'rxjs';
-import { useChainStore, useEVMStore, useFeedbackStore } from 'src/antelope';
+import { useAccountStore, useChainStore, useEVMStore, useFeedbackStore } from 'src/antelope';
 import {
     AntelopeError,
     ERC20_TYPE,
@@ -250,6 +250,42 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
         });
     }
 
+    async stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
+        this.trace('stakeSystemTokens', amount.toString());
+
+        const chain = useChainStore().getChain(this.label);
+        const stakedToken = (chain.settings as EVMChainSettings).getStakedSystemToken();
+
+        const evm = useEVMStore();
+        const contract = await evm.getContract(this, stakedToken.address, stakedToken.type);
+        if (contract) {
+            const contractInstance = await contract.getContractInstance();
+            const transaction = (await contractInstance.depositTLOS({ value: amount })) as EvmTransactionResponse;
+            return transaction;
+        } else {
+            throw new AntelopeError('antelope.balances.error_token_contract_not_found', { address: stakedToken.address });
+        }
+    }
+
+    async unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
+        this.trace('unstakeSystemTokens', amount.toString());
+
+        const chain = useChainStore().getChain(this.label);
+        const stakedToken = (chain.settings as EVMChainSettings).getStakedSystemToken();
+
+        const evm = useEVMStore();
+        const contract = await evm.getContract(this, stakedToken.address, stakedToken.type);
+        if (contract) {
+            const contractInstance = await contract.getContractInstance();
+            const amountInWei = amount.toString();
+            const address = useAccountStore().getAccount(this.label).account;
+            return contractInstance.withdraw(amountInWei, address, address);
+        } else {
+            throw new AntelopeError('antelope.balances.error_token_contract_not_found', { address: stakedToken.address });
+        }
+    }
+
+
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
         return useEVMStore().isProviderOnTheCorrectChain(await this.web3Provider(), chainId);
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index 35c4d6ddf..49e01ab93 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -365,6 +365,19 @@ export class OreIdAuth extends EVMAuthenticator {
         } as EvmTransactionResponse;
     }
 
+    async stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
+        // TODO: implement
+        this.trace('stakeSystemTokens', amount.toString());
+        return Promise.resolve({} as EvmTransactionResponse);
+    }
+
+    async unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
+        // TODO: implement
+        this.trace('unstakeSystemTokens', amount.toString());
+        return Promise.resolve({} as EvmTransactionResponse);
+    }
+
+
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
         return true;
diff --git a/src/antelope/wallets/authenticators/WalletConnectAuth.ts b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
index fa2ce28e0..aa8a5981d 100644
--- a/src/antelope/wallets/authenticators/WalletConnectAuth.ts
+++ b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
@@ -353,6 +353,18 @@ export class WalletConnectAuth extends EVMAuthenticator {
         return await writeContract(sendConfig);
     }
 
+    async stakeSystemTokens(amount: BigNumber): Promise<WriteContractResult> {
+        // TODO: implement
+        this.trace('stakeSystemTokens', amount.toString());
+        return Promise.resolve({} as WriteContractResult);
+    }
+
+    async unstakeSystemTokens(amount: BigNumber): Promise<WriteContractResult> {
+        // TODO: implement
+        this.trace('unstakeSystemTokens', amount.toString());
+        return Promise.resolve({} as WriteContractResult);
+    }
+
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
 
diff --git a/src/components/evm/inputs/CurrencyInput.vue b/src/components/evm/inputs/CurrencyInput.vue
index bb8e82b80..6cbd0d1d8 100644
--- a/src/components/evm/inputs/CurrencyInput.vue
+++ b/src/components/evm/inputs/CurrencyInput.vue
@@ -931,15 +931,20 @@ export default defineComponent({
                 this.inputIsDirty = false;
             });
         },
+
+        // utility to convert to string properties attrs typed as never
+        asString(val: unknown): string {
+            return val as string;
+        },
     },
 });
 </script>
 
 <template>
 <div
-    :id="($attrs.id as string)"
+    :id="asString($attrs.id)"
     :class="{
-        [$attrs.class as string]: !!$attrs.class,
+        [asString($attrs.class)]: !!$attrs.class,
         'c-currency-input': true,
         'c-currency-input--error': !!visibleErrorText,
         'c-currency-input--readonly': !!inputElementAttrs.readonly,
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 99156a4b2..8dbb0ddfe 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -529,6 +529,7 @@ export default {
             error_apy: 'Error in getting APY',
             error_invalid_network: 'Invalid network',
             error_no_default_authenticator: 'No default authenticator found',
+            error_no_default_authenticator: 'No default authenticator found',
         },
         account: {
             error_login_native: 'An error has occurred trying to login to the native chain',
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index c37bce9e0..762cf3f90 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -17,7 +17,6 @@ import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
 import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
 import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
-import { AntelopeError } from 'src/antelope/types';
 
 const label = 'current';
 
@@ -104,7 +103,7 @@ const formIsValid = computed(() =>
     !inputModelValue.value.isZero() &&
     inputModelValue.value.lt(availableTostake.value),
 );
-const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeSystemTokens'));
+const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeEVMSystemTokens'));
 
 
 // methods
@@ -131,11 +130,11 @@ async function handleCtaClick() {
 
     if (formIsValid.value) {
         try {
-            const tx = await useRexStore().stakeSystemTokens(label, inputModelValue.value);
+            const tx = await useRexStore().stakeEVMSystemTokens(label, inputModelValue.value);
             const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
 
             const dismiss = ant.config.notifyNeutralMessageHandler(
-                $t('notification.neutral_message_stakeping', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+                $t('notification.neutral_message_staking', { quantity: formattedAmount, symbol: systemTokenSymbol }),
             );
 
             tx.wait().then(() => {
@@ -149,12 +148,6 @@ async function handleCtaClick() {
             });
         } catch (err) {
             console.error(err);
-            if (err instanceof AntelopeError) {
-                const evmErr = err as AntelopeError;
-                ant.config.notifyFailureMessage($t(evmErr.message), evmErr.payload);
-            } else {
-                ant.config.notifyFailureMessage($t('evm_wallet.general_error'));
-            }
         }
     }
 }
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
new file mode 100644
index 000000000..59185d0bb
--- /dev/null
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ethers } from 'ethers';
+
+import {
+    getAntelope,
+    useAccountStore,
+    useBalancesStore,
+    useChainStore,
+    useRexStore,
+    useUserStore,
+} from 'src/antelope';
+
+import EVMSidebarPage from 'src/layouts/EVMSidebarPage.vue';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
+import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { AntelopeError } from 'src/antelope/types';
+
+const label = 'current';
+
+const { t: $t } = useI18n();
+const uiDecimals = 2;
+const ant = getAntelope();
+const chainStore = useChainStore();
+const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
+const userStore = useUserStore();
+const balanceStore = useBalancesStore();
+const accountStore = useAccountStore();
+
+const systemToken = chainSettings.getSystemToken();
+const systemTokenSymbol = systemToken.symbol;
+const systemTokenDecimals = systemToken.decimals;
+const stakedToken = chainSettings.getStakedSystemToken();
+const stakedTokenSymbol = stakedToken.symbol;
+const stakedTokenDecimals = stakedToken.decimals;
+
+
+// data
+const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
+const inputModelValue = ref(ethers.constants.Zero);
+const estimatedGas = ref(ethers.constants.Zero);
+const stakedRatio = computed(() => {
+    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
+    return chainStore.getStakedRatio(label);
+});
+const outputModelValue = computed(() => {
+    if (stakedRatio.value.isZero()) {
+        return ethers.constants.Zero;
+    }
+    const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
+    console.log('outputModelValue computed: ', output.toString());
+    return output;
+});
+// computed
+const fiatLocale = computed(() => userStore.fiatLocale);
+const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
+    balance => balance.token.contract === systemToken.address)[0],
+);
+const systemTokenFiatPrice = computed(() => systemTokenBalanceInfo.value?.token.price.getAmountInFiatStr(1) ?? '1');
+const systemTokenBalance = computed(() => systemTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
+const sidebarContent = computed(() => {
+    const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
+    const content = [{
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_1',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_2_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_3',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_4_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_5',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }];
+
+    return {
+        header,
+        content,
+    };
+});
+const availableTostake = computed(() => {
+    const available = systemTokenBalance.value.sub(estimatedGas.value);
+
+    if (available.lt(0)) {
+        return ethers.constants.Zero;
+    }
+    return available;
+});
+const formIsValid = computed(() =>
+    !inputModelValue.value.isZero() &&
+    inputModelValue.value.lt(availableTostake.value),
+);
+const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeEVMSystemTokens'));
+
+
+// methods
+onBeforeMount(() => {
+    // https://github.com/telosnetwork/telos-wallet/issues/274
+    const GAS_FOR_stakePING_TOKEN = 55500;
+    chainSettings.getEstimatedGas(GAS_FOR_stakePING_TOKEN).then((gas) => {
+        estimatedGas.value = gas.system;
+    });
+});
+
+async function handleCtaClick() {
+    const label = 'logged';
+    if (!await accountStore.isConnectedToCorrectNetwork(label)) {
+        const networkName = useChainStore().loggedChain.settings.getDisplay();
+        const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
+
+        ant.config.notifyFailureWithAction(errorMessage, {
+            label: ant.config.localizationHandler('evm_wallet.switch'),
+        });
+
+        return;
+    }
+
+    if (formIsValid.value) {
+        try {
+            const tx = await useRexStore().stakeEVMSystemTokens(label, inputModelValue.value);
+            const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
+
+            const dismiss = ant.config.notifyNeutralMessageHandler(
+                $t('notification.neutral_message_staking', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+            );
+
+            tx.wait().then(() => {
+                ant.config.notifySuccessfulTrxHandler(
+                    `${chainSettings.getExplorerUrl()}/tx/${tx.hash}`,
+                );
+            }).catch((err) => {
+                console.error(err);
+            }).finally(() => {
+                dismiss();
+            });
+        } catch (err) {
+            console.error(err);
+        }
+    }
+}
+</script>
+
+<template>
+<EVMSidebarPage :sidebar-content="sidebarContent">
+
+    <!-- convert ratio 1:stakedRatio -->
+    <div class="row q-mb-xl">
+        <div class="col-12">
+            <div class="c-stake-tab__badge-container">
+                <ConversionRateBadge
+                    :token-one-symbol="systemTokenSymbol"
+                    :token-two-symbol="stakedTokenSymbol"
+                    :token-two-decimals="systemTokenDecimals"
+                    :token-two-amount="stakedRatio"
+                    :decimals="uiDecimals"
+                />
+            </div>
+        </div>
+    </div>
+
+    <!-- TLOS input -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="inputModelValue"
+                :symbol="systemTokenSymbol"
+                :decimals="systemTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :secondary-currency-code="fiatCurrency"
+                :secondary-currency-decimals="2"
+                :secondary-currency-conversion-factor="systemTokenFiatPrice"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                :max-value="availableTostake"
+                class="c-stake-tab__input"
+            />
+        </div>
+    </div>
+
+    <!-- arrow -->
+    <div class="row q-mb-sm">
+        <div class="col-12 text-center">
+            <img
+                src="~assets/icon--arrow-down.svg"
+                :alt="$t('global.arrow_icon_alt')"
+                height="20"
+                width="18"
+            >
+        </div>
+    </div>
+
+    <!-- output field (readonly) -->
+    <div class="row q-mb-lg">
+        <div class="col-12">
+            <CurrencyInput
+                v-model="outputModelValue"
+                :symbol="stakedTokenSymbol"
+                :decimals="stakedTokenDecimals"
+                :decimals-to-display="uiDecimals"
+                :locale="fiatLocale"
+                :label="$t('evm_stake.stake_input_label')"
+                class="c-stake-tab__input"
+                readonly="readonly"
+            />
+        </div>
+    </div>
+
+    <!-- stake button -->
+    <div class="row">
+        <div class="col-12">
+            <div class="c-stake-tab__cta-container">
+                <q-btn
+                    color="primary"
+                    :disable="!formIsValid"
+                    :loading="ctaIsLoading"
+                    :label="$t('evm_stake.stake')"
+                    :aria-label="$t(
+                        'evm_stake.stake_button_label',
+                        { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+                    )"
+                    @click="handleCtaClick"
+                />
+            </div>
+        </div>
+    </div>
+</EVMSidebarPage>
+</template>
+
+<style lang="scss">
+.c-stake-tab {
+    &__badge-container,
+    &__cta-container,
+    &__input {
+        max-width: 320px;
+        margin: auto;
+    }
+
+    &__badge-container,
+    &__cta-container {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+</style>
diff --git a/test/jest/utils/antelope/index.ts b/test/jest/utils/antelope/index.ts
index a1d6dfe35..8096f186b 100644
--- a/test/jest/utils/antelope/index.ts
+++ b/test/jest/utils/antelope/index.ts
@@ -54,3 +54,4 @@ export * from 'test/jest/utils/antelope/store-platform';
 export * from 'test/jest/utils/antelope/wagmi-web3';
 export * from 'test/jest/utils/antelope/globalProps';
 
+
diff --git a/test/jest/utils/antelope/mockData.ts b/test/jest/utils/antelope/mockData.ts
index 3aa6d63f6..a7a412931 100644
--- a/test/jest/utils/antelope/mockData.ts
+++ b/test/jest/utils/antelope/mockData.ts
@@ -96,6 +96,8 @@ const MockData = {
         id: CHAIN_ID,
         display: TEST_NETWORK_NAME,
         hyperionEndpoint: ENDPOINT_URL,
+        stakedRatio: ethers.BigNumber.from('0600000000000000000'),
+        unstakedRatio: ethers.BigNumber.from('1200000000000000000'),
     },
     Network: TEST_NETWORK,
     ExplorerUrl: EXPLORER_URL,
diff --git a/test/jest/utils/antelope/store-chain.ts b/test/jest/utils/antelope/store-chain.ts
index 92d49ff0c..a9ab1b180 100644
--- a/test/jest/utils/antelope/store-chain.ts
+++ b/test/jest/utils/antelope/store-chain.ts
@@ -39,6 +39,8 @@ const getTokens = jest.fn().mockImplementation(() => Chain.tokens);
 const getExplorerUrl = jest.fn().mockImplementation(() => MockData.ExplorerUrl);
 const getEcosystemUrl = jest.fn().mockImplementation(() => MockData.EcosystemUrl);
 const getNetworkSettings = jest.fn().mockImplementation(() => ChainSettings);
+const getStakedRatio = jest.fn().mockImplementation(() => MockData.Chain.stakedRatio);
+const getUnstakedRatio = jest.fn().mockImplementation(() => MockData.Chain.unstakedRatio);
 
 // actions -
 const updateChainData = jest.fn().mockImplementation(() => ({
@@ -72,6 +74,8 @@ const ChainGetters = {
     getExplorerUrl,
     getEcosystemUrl,
     getNetworkSettings,
+    getStakedRatio,
+    getUnstakedRatio,
 };
 
 const ChainActions = {
diff --git a/test/jest/utils/antelope/store-utils.ts b/test/jest/utils/antelope/store-utils.ts
new file mode 100644
index 000000000..4c9df85ad
--- /dev/null
+++ b/test/jest/utils/antelope/store-utils.ts
@@ -0,0 +1,12 @@
+
+const subscribeForTransactionReceipt = jest.fn().mockImplementation(() => ({
+    then: jest.fn().mockImplementation((cb: () => void) => cb()),
+}));
+
+jest.mock('src/antelope/stores/utils/trx-utils', () => ({
+    subscribeForTransactionReceipt,
+}));
+
+export {
+    subscribeForTransactionReceipt,
+};

From 61f96cdd6bb0582d0bf18a64e77db21da9fdaff7 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 19:38:17 -0300
Subject: [PATCH 199/268] save WIP - staking tab

---
 src/antelope/stores/rex.ts                    |  6 +-
 .../wallets/authenticators/OreIdAuth.ts       | 67 +++++++++++++++++++
 src/pages/evm/staking/StakingTab.vue          |  3 +-
 src/pages/evm/staking/UnstakingTab.vue        |  3 +-
 4 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index aa686e116..76096f5c4 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -16,7 +16,7 @@ import {
 import { AntelopeError, Label, TransactionResponse } from 'src/antelope/types';
 import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
-import { getAntelope, useBalancesStore, useChainStore, useEVMStore } from 'src/antelope';
+import { CURRENT_CONTEXT, getAntelope, useBalancesStore, useChainStore, useEVMStore } from 'src/antelope';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION } from 'src/antelope/stores/utils';
 import { subscribeForTransactionReceipt } from 'src/antelope/stores/utils/trx-utils';
@@ -207,8 +207,8 @@ export const useRexStore = defineStore(store_name, {
             subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
                 this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
                 if (receipt.status === 1) {
-                    this.updateRexDataForAccount('logged', account);
-                    useBalancesStore().updateBalancesForAccount('logged', account);
+                    this.updateRexDataForAccount(CURRENT_CONTEXT, account);
+                    useBalancesStore().updateBalancesForAccount(CURRENT_CONTEXT, account);
                 }
                 return receipt;
             });
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index 49e01ab93..2b061ddee 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -406,3 +406,70 @@ export class OreIdAuth extends EVMAuthenticator {
     }
 
 }
+
+/*
+-- Documentations --
+
+---
+sidebar_positon: 4
+hide_table_of_contents: true
+title: Reading data from a Contract
+---
+
+# Reading data from a Contract
+
+## Interacting
+
+On EVM the ontracts may hold data in a private way, which means is not accesible to the public. However, the contracts may have public methods that allow to read the data. These methods are called `view` or `pure` methods. The `view` methods are the ones that read data from the blockchain, while the `pure` methods are the ones that do not read data from the blockchain. Both methods are free to use and do not require any signing.
+
+In order execute a read function, you need to instantiate a contract object and call the method you want to execute. In this chapter we will show how to read the `balanceOf` method from the `ERC20` contract using JsonRpcProvider as the provider for remote access to the blockchain.
+
+### Create the web3 provider
+
+First, we need to create a web3 provider. In this example we will use the `JsonRpcProvider` as the provider for remote access to the blockchain.
+
+```typescript
+async web3Provider(): Promise<ethers.providers.Web3Provider> {
+    const RPC_ENDPOINT = {
+        protocol: 'https',
+        host: 'mainnet.telos.net',
+        port: 443,
+        path: '/evm',
+    };
+    const url = `${RPC_ENDPOINT.protocol}://${RPC_ENDPOINT.host}:${RPC_ENDPOINT.port}${RPC_ENDPOINT.path ?? ''}`;
+    const web3Provider = new ethers.providers.JsonRpcProvider(url);
+    await web3Provider.ready;
+    return web3Provider as ethers.providers.Web3Provider;
+}
+```
+
+### Create the contract object
+
+Then, we need to create a contract object. In this example we will use the `ERC20` contract.
+
+```typescript
+const provider = await this.web3Provider();
+// you don't need the whole ABI, just the methods you want to call
+const erc20Abi = [
+    'function balanceOf(address account) view returns (uint256)',
+];
+const erc20Contract = new ethers.Contract(token, erc20Abi, provider);
+```
+
+### Call the method
+
+Finally, we need to call the method. In this example we will call the `balanceOf` method.
+
+```typescript
+const balance: ethers.BigNumber = await erc20Contract.balanceOf(address);
+
+// you can convert the balance to a number using the ethers.utils.formatUnits method
+const tokenDecimals = 18;
+const balanceNumber: number = ethers.utils.formatUnits(balance, tokenDecimals);
+```
+
+## Conclusion
+
+In this chapter we have shown how to read data from a contract using the `view` methods, prforming a remote call to the blockchain endpoint through the `JsonRpcProvider` provider. You can execute any `view` or `pure` method from any contract using the same approach. All you need is a provider and the contract ABI.
+
+*/
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index 762cf3f90..a1475cfbb 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { ethers } from 'ethers';
 
 import {
+    CURRENT_CONTEXT,
     getAntelope,
     useAccountStore,
     useBalancesStore,
@@ -116,7 +117,7 @@ onBeforeMount(() => {
 });
 
 async function handleCtaClick() {
-    const label = 'logged';
+    const label = CURRENT_CONTEXT;
     if (!await accountStore.isConnectedToCorrectNetwork(label)) {
         const networkName = useChainStore().loggedChain.settings.getDisplay();
         const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index 59185d0bb..3761b6d03 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { ethers } from 'ethers';
 
 import {
+    CURRENT_CONTEXT,
     getAntelope,
     useAccountStore,
     useBalancesStore,
@@ -117,7 +118,7 @@ onBeforeMount(() => {
 });
 
 async function handleCtaClick() {
-    const label = 'logged';
+    const label = CURRENT_CONTEXT;
     if (!await accountStore.isConnectedToCorrectNetwork(label)) {
         const networkName = useChainStore().loggedChain.settings.getDisplay();
         const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });

From 0aa3bc538cbf3bf5dbfae687a500129431b08d3f Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sun, 3 Sep 2023 14:21:36 -0300
Subject: [PATCH 200/268] removing console logs

---
 src/antelope/wallets/authenticators/InjectedProviderAuth.ts | 6 +++---
 src/components/ConversionRateBadge.vue                      | 1 -
 src/pages/evm/staking/StakingTab.vue                        | 6 +-----
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
index b9989004c..93d5e857c 100644
--- a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
+++ b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
@@ -83,7 +83,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
             const wethContract = new ethers.Contract(wrappedSystemTokenContractAddress, wtlosAbiDeposit, signer);
 
             if (!wethContract) {
-                console.log('wrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
+                this.trace('wrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
                 throw 'Unable to get wrapped system contract instance';
             }
             wrappedSystemTokenContractInstance = wethContract;
@@ -105,7 +105,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
     }
 
     async unwrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse> {
-        console.log('unwrapSystemToken', amount.toString());
+        this.trace('unwrapSystemToken', amount.toString());
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address;
         let wrappedSystemTokenContractInstance: ethers.Contract | undefined;
@@ -115,7 +115,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
             const wrappedSystemTokenContract = new ethers.Contract(wrappedSystemTokenContractAddress, wtlosAbiWithdraw, signer);
 
             if (!wrappedSystemTokenContract) {
-                console.log('unwrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
+                this.trace('unwrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
                 throw 'Unable to get wrapped system contract instance';
             }
             wrappedSystemTokenContractInstance = wrappedSystemTokenContract;
diff --git a/src/components/ConversionRateBadge.vue b/src/components/ConversionRateBadge.vue
index b74f4fc75..336ad75f0 100644
--- a/src/components/ConversionRateBadge.vue
+++ b/src/components/ConversionRateBadge.vue
@@ -18,7 +18,6 @@ const props = defineProps<{
 const fiatLocale = computed(() => userStore.fiatLocale);
 
 const label = computed(() => {
-    console.log('label computed: ', props.tokenOneSymbol, props.tokenTwoSymbol, props.tokenTwoAmount.toString(), fiatLocale.value, props.tokenTwoDecimals);
     const abbreviate = props.decimals === 0;
     const prettyTokenTwoAmount = prettyPrintCurrency(
         props.tokenTwoAmount,
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index a1475cfbb..c5481bdf8 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -42,16 +42,12 @@ const stakedTokenDecimals = stakedToken.decimals;
 const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
 const inputModelValue = ref(ethers.constants.Zero);
 const estimatedGas = ref(ethers.constants.Zero);
-const stakedRatio = computed(() => {
-    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
-    return chainStore.getStakedRatio(label);
-});
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
 const outputModelValue = computed(() => {
     if (stakedRatio.value.isZero()) {
         return ethers.constants.Zero;
     }
     const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
-    console.log('outputModelValue computed: ', output.toString());
     return output;
 });
 // computed

From 819bdef3d92c6bf44951f2755f1ea85a20625069 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sun, 3 Sep 2023 20:10:17 -0300
Subject: [PATCH 201/268] save WIP - adding for all EVMAuthenticators
 stake/unstake

---
 env.js                                        |   3 +-
 src/antelope/stores/utils/abi/wrapTlos.ts     |  31 +++
 src/antelope/stores/utils/trx-utils.ts        |   2 +
 .../wallets/authenticators/OreIdAuth.ts       | 188 +++++++++---------
 .../authenticators/WalletConnectAuth.ts       |  35 +++-
 5 files changed, 163 insertions(+), 96 deletions(-)

diff --git a/env.js b/env.js
index 6d267adee..7b0bd7194 100644
--- a/env.js
+++ b/env.js
@@ -22,7 +22,8 @@ const TESTNET = {
     HYPERION_ENDPOINT: 'https://testnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer-test.telos.net',
     CHAIN_NAME: 'telos-testnet',
-    APP_OREID_APP_ID: 't_75a4d9233ec441d18c4221e92b379197',
+    // APP_OREID_APP_ID: 't_75a4d9233ec441d18c4221e92b379197',
+    APP_OREID_APP_ID: 't_23991cde82994c88bb582c019a9c45e1',
 };
 
 const MAINNET = {
diff --git a/src/antelope/stores/utils/abi/wrapTlos.ts b/src/antelope/stores/utils/abi/wrapTlos.ts
index 01346414b..c86fee9b3 100644
--- a/src/antelope/stores/utils/abi/wrapTlos.ts
+++ b/src/antelope/stores/utils/abi/wrapTlos.ts
@@ -30,3 +30,34 @@ export const wtlosAbiWithdraw: EvmABI = [
         type: 'function',
     },
 ];
+
+export const stlosAbiDeposit: EvmABI = [
+    {
+        constant: false,
+        inputs: [],
+        name: 'depositTLOS',
+        outputs: [],
+        payable: true,
+        stateMutability: 'payable',
+        type: 'function',
+    },
+];
+
+export const stlosAbiWithdraw: EvmABI = [
+    {
+        constant: false,
+        inputs: [
+            {
+                indexed: false,
+                internalType: 'uint256',
+                name: 'wad',
+                type: 'uint256',
+            },
+        ],
+        name: 'withdrawTLOS',
+        outputs: [],
+        payable: false,
+        stateMutability: 'nonpayable',
+        type: 'function',
+    },
+];
diff --git a/src/antelope/stores/utils/trx-utils.ts b/src/antelope/stores/utils/trx-utils.ts
index 9d7305fa0..05dbe2633 100644
--- a/src/antelope/stores/utils/trx-utils.ts
+++ b/src/antelope/stores/utils/trx-utils.ts
@@ -13,6 +13,8 @@ export async function subscribeForTransactionReceipt(account: AccountModel, resp
         const provider = await authenticator.web3Provider();
         if (provider) {
             const whenConfirmed = provider.waitForTransaction(response.hash);
+            // TODO: remove this console error
+            console.error('subscribeForTransactionReceipt CONFIRMED!!', response.hash);
             // we add the wait method to the response,
             // so that the caller can subscribe to the confirmation event
             response.wait = async () => whenConfirmed;
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index 2b061ddee..d3c5e7933 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -1,7 +1,13 @@
 import { AuthProvider, ChainNetwork, OreId, OreIdOptions, JSONObject, UserChainAccount } from 'oreid-js';
 import { BigNumber, ethers } from 'ethers';
 import { WebPopup } from 'oreid-webpopup';
-import { erc20Abi, wtlosAbiDeposit, wtlosAbiWithdraw } from 'src/antelope/types';
+import {
+    erc20Abi,
+    stlosAbiDeposit,
+    stlosAbiWithdraw,
+    wtlosAbiDeposit,
+    wtlosAbiWithdraw,
+} from 'src/antelope/types';
 import { EVMAuthenticator } from 'src/antelope/wallets';
 import {
     AntelopeError,
@@ -190,27 +196,21 @@ export class OreIdAuth extends EVMAuthenticator {
 
     async transferTokens(token: TokenClass, amount: ethers.BigNumber, to: addressString): Promise<EvmTransactionResponse> {
         this.trace('transferTokens', token, amount, to);
+        this.checkIntegrity();
 
-        if (!this.userChainAccount) {
-            console.error('Inconsistency error: userChainAccount is null');
-            throw new AntelopeError('antelope.evm.error_no_provider');
-        }
-
-        if (!oreId) {
-            console.error('Inconsistency error: oreId is null');
-            throw new AntelopeError('antelope.evm.error_no_provider');
-        }
-
-        const from = this.userChainAccount.chainAccount as addressString;
+        // prepare variables
+        const from = this.userChainAccount?.chainAccount as addressString;
         const value = amount.toHexString();
         const abi = erc20Abi;
 
+        // transaction body: transfer system tokens
         const systemTransfer = {
             from,
             to,
             value,
         };
 
+        // transaction body: transfer erc20 tokens
         const erc20Transfer = {
             from,
             to: token.address,
@@ -228,10 +228,38 @@ export class OreIdAuth extends EVMAuthenticator {
             transactionBody = erc20Transfer;
         }
 
+        return this.performOreIdTransaction(from, transactionBody);
+    }
+
+    async prepareTokenForTransfer(token: TokenClass | null, amount: ethers.BigNumber, to: string): Promise<void> {
+        this.trace('prepareTokenForTransfer', [token], amount, to);
+    }
+
+    /**
+     * utility function to check if the user has a valid chain account and the oreId instance is initialized
+     */
+    checkIntegrity(): boolean {
+        if (!this.userChainAccount) {
+            console.error('Inconsistency error: userChainAccount is null');
+            throw new AntelopeError('antelope.evm.error_no_provider');
+        }
+
+        if (!oreId) {
+            console.error('Inconsistency error: oreId is null');
+            throw new AntelopeError('antelope.evm.error_no_provider');
+        }
+
+        return true;
+    }
+
+    async performOreIdTransaction(from: addressString, json: JSONObject): Promise<EvmTransactionResponse> {
+
+        const oreIdInstance = oreId as OreId;
+
         // sign a blockchain transaction
         this.trace('createTransaction()');
-        const transaction = await oreId.createTransaction({
-            transaction: transactionBody,
+        const transaction = await oreIdInstance.createTransaction({
+            transaction: json,
             chainAccount: from,
             chainNetwork: this.getChainNetwork(useChainStore().getChain(this.label).settings.getNetwork()),
             signOptions: {
@@ -243,7 +271,7 @@ export class OreIdAuth extends EVMAuthenticator {
         // have the user approve signature
         this.trace('Signing a transaction...', transaction);
 
-        const { transactionId } = await oreId.popup.sign({ transaction });
+        const { transactionId } = await oreIdInstance.popup.sign({ transaction });
         this.trace('transactionId:', transactionId);
 
         return {
@@ -252,30 +280,18 @@ export class OreIdAuth extends EVMAuthenticator {
         } as EvmTransactionResponse;
     }
 
-    async prepareTokenForTransfer(token: TokenClass | null, amount: ethers.BigNumber, to: string): Promise<void> {
-        this.trace('prepareTokenForTransfer', [token], amount, to);
-    }
-
     async wrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse> {
         this.trace('wrapSystemToken', amount);
+        this.checkIntegrity();
 
-        if (!this.userChainAccount) {
-            console.error('Inconsistency error: userChainAccount is null');
-            throw new AntelopeError('antelope.evm.error_no_provider');
-        }
-
-        if (!oreId) {
-            console.error('Inconsistency error: oreId is null');
-            throw new AntelopeError('antelope.evm.error_no_provider');
-        }
-
+        // prepare variables
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address as addressString;
-        const from = this.userChainAccount.chainAccount as addressString;
+        const from = this.userChainAccount?.chainAccount as addressString;
         const value = amount.toHexString();
         const abi = wtlosAbiDeposit;
 
-
+        // transaction body: wrap system token
         const wrapTransaction = {
             from,
             to: wrappedSystemTokenContractAddress,
@@ -287,50 +303,21 @@ export class OreIdAuth extends EVMAuthenticator {
             },
         } as unknown as JSONObject;
 
-        // sign a blockchain transaction
-        this.trace('createTransaction()');
-        const transaction = await oreId.createTransaction({
-            transaction: wrapTransaction,
-            chainAccount: from,
-            chainNetwork: this.getChainNetwork(useChainStore().getChain(this.label).settings.getNetwork()),
-            signOptions: {
-                broadcast: true,
-                returnSignedTransaction: true,
-            },
-        });
-
-        // have the user approve signature
-        this.trace('Signing a transaction...', transaction);
-
-        const { transactionId } = await oreId.popup.sign({ transaction });
-        this.trace('transactionId:', transactionId);
-
-        return {
-            hash: transactionId,
-            wait: async () => Promise.resolve({} as ethers.providers.TransactionReceipt),
-        } as EvmTransactionResponse;
-
+        return this.performOreIdTransaction(from, wrapTransaction);
     }
 
     async unwrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse> {
         this.trace('unwrapSystemToken', amount.toString());
+        this.checkIntegrity();
 
-        if (!this.userChainAccount) {
-            console.error('Inconsistency error: userChainAccount is null');
-            throw new AntelopeError('antelope.evm.error_no_provider');
-        }
-
-        if (!oreId) {
-            console.error('Inconsistency error: oreId is null');
-            throw new AntelopeError('antelope.evm.error_no_provider');
-        }
-
+        // prepare variables
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address as addressString;
-        const from = this.userChainAccount.chainAccount as addressString;
+        const from = this.userChainAccount?.chainAccount as addressString;
         const value = amount.toHexString();
         const abi = wtlosAbiWithdraw;
 
+        // transaction body: unwrap system token
         const unwrapTransaction = {
             from,
             to: wrappedSystemTokenContractAddress,
@@ -341,40 +328,59 @@ export class OreIdAuth extends EVMAuthenticator {
             },
         } as unknown as JSONObject;
 
-        // sign a blockchain transaction
-        this.trace('createTransaction()');
-        const transaction = await oreId.createTransaction({
-            transaction: unwrapTransaction,
-            chainAccount: from,
-            chainNetwork: this.getChainNetwork(useChainStore().getChain(this.label).settings.getNetwork()),
-            signOptions: {
-                broadcast: true,
-                returnSignedTransaction: true,
-            },
-        });
-
-        // have the user approve signature
-        this.trace('Signing a transaction...', transaction);
-
-        const { transactionId } = await oreId.popup.sign({ transaction });
-        this.trace('transactionId:', transactionId);
-
-        return {
-            hash: transactionId,
-            wait: async () => Promise.resolve({} as ethers.providers.TransactionReceipt),
-        } as EvmTransactionResponse;
+        return this.performOreIdTransaction(from, unwrapTransaction);
     }
 
     async stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
-        // TODO: implement
         this.trace('stakeSystemTokens', amount.toString());
-        return Promise.resolve({} as EvmTransactionResponse);
+        this.checkIntegrity();
+
+        // prepare variables
+        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const systemTokenContractAddress = chainSettings.getSystemToken().address as addressString;
+        const from = this.userChainAccount?.chainAccount as addressString;
+        const value = amount.toHexString();
+        const abi = stlosAbiDeposit;
+
+        console.assert(stlosAbiDeposit.length === 1, 'warning: we are assuming stlosAbiDeposit has only one method');
+        // transaction body: stake system token
+        const stakeTransaction = {
+            from,
+            to: systemTokenContractAddress,
+            value,
+            'contract': {
+                abi,
+                'parameters': [],
+                'method': stlosAbiDeposit[0].name,
+            },
+        } as unknown as JSONObject;
+
+        return this.performOreIdTransaction(from, stakeTransaction);
     }
 
     async unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
-        // TODO: implement
         this.trace('unstakeSystemTokens', amount.toString());
-        return Promise.resolve({} as EvmTransactionResponse);
+        this.checkIntegrity();
+
+        // prepare variables
+        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const systemTokenContractAddress = chainSettings.getSystemToken().address as addressString;
+        const from = this.userChainAccount?.chainAccount as addressString;
+        const value = amount.toHexString();
+        const abi = stlosAbiWithdraw;
+
+        // transaction body: unstake system token
+        const unstakeTransaction = {
+            from,
+            to: systemTokenContractAddress,
+            'contract': {
+                abi,
+                'parameters': [value],
+                'method': 'withdraw',
+            },
+        } as unknown as JSONObject;
+
+        return this.performOreIdTransaction(from, unstakeTransaction);
     }
 
 
diff --git a/src/antelope/wallets/authenticators/WalletConnectAuth.ts b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
index aa8a5981d..8a3e2281a 100644
--- a/src/antelope/wallets/authenticators/WalletConnectAuth.ts
+++ b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
@@ -28,6 +28,8 @@ import {
     EvmABI,
     TokenClass,
     addressString,
+    stlosAbiDeposit,
+    stlosAbiWithdraw,
     wtlosAbiDeposit,
     wtlosAbiWithdraw,
 } from 'src/antelope/types';
@@ -338,6 +340,7 @@ export class WalletConnectAuth extends EVMAuthenticator {
     }
 
     async unwrapSystemToken(amount: BigNumber): Promise<WriteContractResult> {
+        this.trace('unwrapSystemToken', amount.toString());
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address as addressString;
 
@@ -354,15 +357,39 @@ export class WalletConnectAuth extends EVMAuthenticator {
     }
 
     async stakeSystemTokens(amount: BigNumber): Promise<WriteContractResult> {
-        // TODO: implement
         this.trace('stakeSystemTokens', amount.toString());
-        return Promise.resolve({} as WriteContractResult);
+        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const stakedSystemTokenContractAddress = chainSettings.getStakedSystemToken().address as addressString;
+
+        console.assert(stlosAbiDeposit.length === 1, 'warning: we are assuming stlosAbiDeposit has only one method');
+        const sendConfig = await prepareWriteContract({
+            chainId: +useChainStore().getChain(this.label).settings.getChainId(),
+            address: stakedSystemTokenContractAddress,
+            abi: stlosAbiDeposit,
+            functionName: stlosAbiDeposit[0].name,
+            args: [],
+            value: BigInt(amount.toString()),
+        });
+
+        return await writeContract(sendConfig);
     }
 
     async unstakeSystemTokens(amount: BigNumber): Promise<WriteContractResult> {
-        // TODO: implement
         this.trace('unstakeSystemTokens', amount.toString());
-        return Promise.resolve({} as WriteContractResult);
+        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const stakedSystemTokenContractAddress = chainSettings.getStakedSystemToken().address as addressString;
+
+        console.assert(stlosAbiWithdraw.length === 1, 'warning: we are assuming stlosAbiWithdraw has only one method');
+        const sendConfig = await prepareWriteContract({
+            chainId: +useChainStore().getChain(this.label).settings.getChainId(),
+            address: stakedSystemTokenContractAddress,
+            abi: stlosAbiWithdraw,
+            functionName: stlosAbiWithdraw[0].name,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            args: [amount] as any[],
+        });
+
+        return await writeContract(sendConfig);
     }
 
     async isConnectedTo(chainId: string): Promise<boolean> {

From 004afe4d9729625eb7d481e199838f29571fa573 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 7 Sep 2023 10:19:31 -0300
Subject: [PATCH 202/268] Staking fully functional

---
 src/antelope/stores/account.ts                   | 1 +
 src/antelope/wallets/authenticators/OreIdAuth.ts | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index 94dcd3a59..7aef0ac51 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -279,6 +279,7 @@ export const useAccountStore = defineStore(store_name, {
             this.trace('isConnectedToCorrectNetwork', label);
             try {
                 useFeedbackStore().setLoading('account.isConnectedToCorrectNetwork');
+                console.log('label ---> ', label, useAccountStore().getAccount(label));
                 const authenticator = useAccountStore().getAccount(label)?.authenticator as EVMAuthenticator;
                 return authenticator.isConnectedToCorrectChain();
             } catch (error) {
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index d3c5e7933..4616cceba 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -337,7 +337,7 @@ export class OreIdAuth extends EVMAuthenticator {
 
         // prepare variables
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
-        const systemTokenContractAddress = chainSettings.getSystemToken().address as addressString;
+        const stakedSystemTokenContractAddress = chainSettings.getStakedSystemToken().address as addressString;
         const from = this.userChainAccount?.chainAccount as addressString;
         const value = amount.toHexString();
         const abi = stlosAbiDeposit;
@@ -346,7 +346,7 @@ export class OreIdAuth extends EVMAuthenticator {
         // transaction body: stake system token
         const stakeTransaction = {
             from,
-            to: systemTokenContractAddress,
+            to: stakedSystemTokenContractAddress,
             value,
             'contract': {
                 abi,
@@ -364,7 +364,7 @@ export class OreIdAuth extends EVMAuthenticator {
 
         // prepare variables
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
-        const systemTokenContractAddress = chainSettings.getSystemToken().address as addressString;
+        const stakedSystemTokenContractAddress = chainSettings.getStakedSystemToken().address as addressString;
         const from = this.userChainAccount?.chainAccount as addressString;
         const value = amount.toHexString();
         const abi = stlosAbiWithdraw;
@@ -372,7 +372,7 @@ export class OreIdAuth extends EVMAuthenticator {
         // transaction body: unstake system token
         const unstakeTransaction = {
             from,
-            to: systemTokenContractAddress,
+            to: stakedSystemTokenContractAddress,
             'contract': {
                 abi,
                 'parameters': [value],

From 8ea99f85093ed3abc00680a28cf4f943cb179851 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 8 Sep 2023 15:37:45 -0300
Subject: [PATCH 203/268] adding some try-catchs and othe minor refactors

---
 src/antelope/stores/account.ts                |   1 -
 src/antelope/stores/balances.ts               |  81 ++++++------
 .../wallets/authenticators/OreIdAuth.ts       | 121 +++++-------------
 src/pages/evm/staking/StakingTab.vue          |   2 +-
 src/pages/evm/staking/UnstakingTab.vue        |   6 +-
 5 files changed, 71 insertions(+), 140 deletions(-)

diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index 7aef0ac51..94dcd3a59 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -279,7 +279,6 @@ export const useAccountStore = defineStore(store_name, {
             this.trace('isConnectedToCorrectNetwork', label);
             try {
                 useFeedbackStore().setLoading('account.isConnectedToCorrectNetwork');
-                console.log('label ---> ', label, useAccountStore().getAccount(label));
                 const authenticator = useAccountStore().getAccount(label)?.authenticator as EVMAuthenticator;
                 return authenticator.isConnectedToCorrectChain();
             } catch (error) {
diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index f36f60c97..cff914f50 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -35,7 +35,6 @@ import {
     useFeedbackStore,
     useChainStore,
     useEVMStore,
-    usePlatformStore,
     CURRENT_CONTEXT,
 } from 'src/antelope';
 import { formatWei } from 'src/antelope/stores/utils';
@@ -72,20 +71,23 @@ export const useBalancesStore = defineStore(store_name, {
     actions: {
         trace: createTraceFunction(store_name),
         init: () => {
+            const balanceStore = useBalancesStore();
             useFeedbackStore().setDebug(store_name, isTracingAll());
             getAntelope().events.onAccountChanged.pipe(
                 filter(({ label, account }) => !!label && !!account),
             ).subscribe({
                 next: async ({ label, account }) => {
                     if (label === CURRENT_CONTEXT) {
-                        await useBalancesStore().updateBalancesForAccount(label, toRaw(account));
+                        await balanceStore.updateBalancesForAccount(label, toRaw(account));
                     }
                 },
             });
 
             // update logged balances every 10 seconds
             setInterval(async () => {
-                await useBalancesStore().updateBalancesForAccount(CURRENT_CONTEXT, useAccountStore().loggedAccount);
+                if (balanceStore.__balances[CURRENT_CONTEXT]) {
+                    await balanceStore.updateBalancesForAccount(CURRENT_CONTEXT, useAccountStore().loggedAccount);
+                }
             }, 10000);
         },
         async updateBalances(label: string) {
@@ -226,14 +228,21 @@ export const useBalancesStore = defineStore(store_name, {
             }
         },
         async updateSystemBalanceForAccount(label: string, address: addressString): Promise<void> {
-            this.trace('updateSystemBalanceForAccount', label, address);
-            const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
-            const sys_token = chain_settings.getSystemToken();
-            const price = (await chain_settings.getUsdPrice()).toString();
-            const marketInfo = { price } as MarketSourceInfo;
-            sys_token.market = new TokenMarketData(marketInfo);
-            const balanceBn = await useAccountStore().getEVMAuthenticator(label)?.getSystemTokenBalance(address);
-            this.processBalanceForToken(label, sys_token, balanceBn);
+            try {
+                this.trace('updateSystemBalanceForAccount', label, address);
+                const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
+                const sys_token = chain_settings.getSystemToken();
+                const price = (await chain_settings.getUsdPrice()).toString();
+                const marketInfo = { price } as MarketSourceInfo;
+                sys_token.market = new TokenMarketData(marketInfo);
+                const accountStore = useAccountStore();
+                const authenticator = accountStore.getEVMAuthenticator(label);
+                const balanceBn = await authenticator.getSystemTokenBalance(address);
+                this.processBalanceForToken(label, sys_token, balanceBn);
+            } catch (error) {
+                console.error(error);
+                throw getAntelope().config.wrapError('antelope.evm.error_update_system_balance_failed', error);
+            }
         },
         shouldAddTokenBalance(label: string, balanceBn: BigNumber, token: TokenClass): boolean {
             const importantTokens = useChainStore().getChain(label).settings.getSystemTokens();
@@ -248,44 +257,26 @@ export const useBalancesStore = defineStore(store_name, {
             return result;
         },
         processBalanceForToken(label: string, token: TokenClass, balanceBn: BigNumber): void {
-            const tokenBalance = new TokenBalance(token, balanceBn);
-            if (this.shouldAddTokenBalance(label, balanceBn, token)) {
-                this.addNewBalance(label, tokenBalance);
-            } else {
-                this.removeBalance(label, tokenBalance);
+            try {
+                const tokenBalance = new TokenBalance(token, balanceBn);
+                if (this.shouldAddTokenBalance(label, balanceBn, token)) {
+                    this.addNewBalance(label, tokenBalance);
+                } else {
+                    this.removeBalance(label, tokenBalance);
+                }
+            } catch (error) {
+                console.error(error, [label, token, balanceBn]);
             }
         },
         async subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<TransactionResponse> {
-            this.trace('subscribeForTransactionReceipt', response.hash);
-            if (account.isNative) {
-                throw new AntelopeError('Not implemented yet for native');
-            } else {
-                const authenticator = account.authenticator as EVMAuthenticator;
-                const provider = await authenticator.web3Provider();
-                if (provider) {
-                    // instead of await, we use then() to return the response immediately
-                    // and perform the balance update in the background
-                    const whenConfirmed = provider.waitForTransaction(response.hash).then((receipt: ethers.providers.TransactionReceipt) => {
-                        this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
-                        if (receipt.status === 1) {
-                            const account = useAccountStore().loggedAccount;
-                            if (account?.account) {
-                                this.updateBalancesForAccount(CURRENT_CONTEXT, account);
-                            }
-                        }
-                        return receipt;
-                    });
-                    // we add the wait method to the response,
-                    // so that the caller can subscribe to the confirmation event
-                    response.wait = async () => whenConfirmed;
-                } else {
-                    if (usePlatformStore().isMobile) {
-                        response.wait = async () => Promise.resolve({} as ethers.providers.TransactionReceipt);
-                    } else {
-                        throw new AntelopeError('antelope.evm.error_no_provider');
-                    }
+            this.trace('subscribeForTransactionReceipt', account.account, response.hash);
+            subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
+                this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
+                if (receipt.status === 1) {
+                    this.updateBalancesForAccount('logged', account);
                 }
-            }
+                return receipt;
+            });
             return response;
         },
         async prepareWagmiSystemTokenTransferConfig(label: Label, to: string, amount: bigint): Promise<void> {
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index 4616cceba..1ec405be3 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -174,23 +174,33 @@ export class OreIdAuth extends EVMAuthenticator {
 
     async getSystemTokenBalance(address: addressString | string): Promise<ethers.BigNumber> {
         this.trace('getSystemTokenBalance', address);
-        const provider = await this.web3Provider();
-        if (provider) {
-            return provider.getBalance(address);
-        } else {
-            throw new AntelopeError('antelope.evm.error_no_provider');
+        try {
+            const provider = await this.web3Provider();
+            if (provider) {
+                return provider.getBalance(address);
+            } else {
+                throw new AntelopeError('antelope.evm.error_no_provider');
+            }
+        } catch (e) {
+            console.error('getSystemTokenBalance', e, address);
+            throw e;
         }
     }
 
     async getERC20TokenBalance(address: addressString, token: addressString): Promise<ethers.BigNumber> {
         this.trace('getERC20TokenBalance', [address, token]);
-        const provider = await this.web3Provider();
-        if (provider) {
-            const erc20Contract = new ethers.Contract(token, erc20Abi, provider);
-            const balance = await erc20Contract.balanceOf(address);
-            return balance;
-        } else {
-            throw new AntelopeError('antelope.evm.error_no_provider');
+        try {
+            const provider = await this.web3Provider();
+            if (provider) {
+                const erc20Contract = new ethers.Contract(token, erc20Abi, provider);
+                const balance = await erc20Contract.balanceOf(address);
+                return balance;
+            } else {
+                throw new AntelopeError('antelope.evm.error_no_provider');
+            }
+        } catch (e) {
+            console.error('getERC20TokenBalance', e, address, token);
+            throw e;
         }
     }
 
@@ -257,7 +267,6 @@ export class OreIdAuth extends EVMAuthenticator {
         const oreIdInstance = oreId as OreId;
 
         // sign a blockchain transaction
-        this.trace('createTransaction()');
         const transaction = await oreIdInstance.createTransaction({
             transaction: json,
             chainAccount: from,
@@ -269,10 +278,7 @@ export class OreIdAuth extends EVMAuthenticator {
         });
 
         // have the user approve signature
-        this.trace('Signing a transaction...', transaction);
-
         const { transactionId } = await oreIdInstance.popup.sign({ transaction });
-        this.trace('transactionId:', transactionId);
 
         return {
             hash: transactionId,
@@ -391,11 +397,17 @@ export class OreIdAuth extends EVMAuthenticator {
 
     async web3Provider(): Promise<ethers.providers.Web3Provider> {
         this.trace('web3Provider');
-        const p:RpcEndpoint = (useChainStore().getChain(this.label).settings as EVMChainSettings).getRPCEndpoint();
-        const url = `${p.protocol}://${p.host}:${p.port}${p.path ?? ''}`;
-        const web3Provider = new ethers.providers.JsonRpcProvider(url);
-        await web3Provider.ready;
-        return web3Provider as ethers.providers.Web3Provider;
+        try {
+            const p:RpcEndpoint = (useChainStore().getChain(this.label).settings as EVMChainSettings).getRPCEndpoint();
+            const url = `${p.protocol}://${p.host}:${p.port}${p.path ?? ''}`;
+            const jsonRpcProvider = new ethers.providers.JsonRpcProvider(url);
+            await jsonRpcProvider.ready;
+            const web3Provider = jsonRpcProvider as ethers.providers.Web3Provider;
+            return web3Provider;
+        } catch (e) {
+            console.error('web3Provider', e);
+            throw e;
+        }
     }
 
     async externalProvider(): Promise<ethers.providers.ExternalProvider> {
@@ -412,70 +424,3 @@ export class OreIdAuth extends EVMAuthenticator {
     }
 
 }
-
-/*
--- Documentations --
-
----
-sidebar_positon: 4
-hide_table_of_contents: true
-title: Reading data from a Contract
----
-
-# Reading data from a Contract
-
-## Interacting
-
-On EVM the ontracts may hold data in a private way, which means is not accesible to the public. However, the contracts may have public methods that allow to read the data. These methods are called `view` or `pure` methods. The `view` methods are the ones that read data from the blockchain, while the `pure` methods are the ones that do not read data from the blockchain. Both methods are free to use and do not require any signing.
-
-In order execute a read function, you need to instantiate a contract object and call the method you want to execute. In this chapter we will show how to read the `balanceOf` method from the `ERC20` contract using JsonRpcProvider as the provider for remote access to the blockchain.
-
-### Create the web3 provider
-
-First, we need to create a web3 provider. In this example we will use the `JsonRpcProvider` as the provider for remote access to the blockchain.
-
-```typescript
-async web3Provider(): Promise<ethers.providers.Web3Provider> {
-    const RPC_ENDPOINT = {
-        protocol: 'https',
-        host: 'mainnet.telos.net',
-        port: 443,
-        path: '/evm',
-    };
-    const url = `${RPC_ENDPOINT.protocol}://${RPC_ENDPOINT.host}:${RPC_ENDPOINT.port}${RPC_ENDPOINT.path ?? ''}`;
-    const web3Provider = new ethers.providers.JsonRpcProvider(url);
-    await web3Provider.ready;
-    return web3Provider as ethers.providers.Web3Provider;
-}
-```
-
-### Create the contract object
-
-Then, we need to create a contract object. In this example we will use the `ERC20` contract.
-
-```typescript
-const provider = await this.web3Provider();
-// you don't need the whole ABI, just the methods you want to call
-const erc20Abi = [
-    'function balanceOf(address account) view returns (uint256)',
-];
-const erc20Contract = new ethers.Contract(token, erc20Abi, provider);
-```
-
-### Call the method
-
-Finally, we need to call the method. In this example we will call the `balanceOf` method.
-
-```typescript
-const balance: ethers.BigNumber = await erc20Contract.balanceOf(address);
-
-// you can convert the balance to a number using the ethers.utils.formatUnits method
-const tokenDecimals = 18;
-const balanceNumber: number = ethers.utils.formatUnits(balance, tokenDecimals);
-```
-
-## Conclusion
-
-In this chapter we have shown how to read data from a contract using the `view` methods, prforming a remote call to the blockchain endpoint through the `JsonRpcProvider` provider. You can execute any `view` or `pure` method from any contract using the same approach. All you need is a provider and the contract ABI.
-
-*/
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index c5481bdf8..0935270f8 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -97,7 +97,7 @@ const availableTostake = computed(() => {
     return available;
 });
 const formIsValid = computed(() =>
-    !inputModelValue.value.isZero() &&
+    !outputModelValue.value.isZero() &&
     inputModelValue.value.lt(availableTostake.value),
 );
 const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeEVMSystemTokens'));
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index 3761b6d03..f5bb4593e 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -43,16 +43,12 @@ const stakedTokenDecimals = stakedToken.decimals;
 const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
 const inputModelValue = ref(ethers.constants.Zero);
 const estimatedGas = ref(ethers.constants.Zero);
-const stakedRatio = computed(() => {
-    console.log('stakedRatio computed: ', chainStore.getStakedRatio(label).toString());
-    return chainStore.getStakedRatio(label);
-});
+const stakedRatio = computed(() => chainStore.getStakedRatio(label));
 const outputModelValue = computed(() => {
     if (stakedRatio.value.isZero()) {
         return ethers.constants.Zero;
     }
     const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
-    console.log('outputModelValue computed: ', output.toString());
     return output;
 });
 // computed

From 5f074d90be3280d5f67dd99caf2abe882ca136b7 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 1 Sep 2023 19:38:17 -0300
Subject: [PATCH 204/268] save WIP - staking tab

---
 src/antelope/stores/rex.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 76096f5c4..db6214b7f 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -118,6 +118,13 @@ export const useRexStore = defineStore(store_name, {
             const totalStaking = await contract.totalAssets();
             this.setTotalStaking(label, totalStaking);
         },
+        async updateRexData(label: string) {
+            this.trace('updateRexData', label);
+            const account = useAccountStore().getAccount(label);
+            if (account) {
+                await this.updateRexDataForAccount(label, account);
+            }
+        },
         /**
          * This method should be called to update the REX data for a given context.
          * @param label identifies the context (account and network) for the data

From 1a25d3642a8c847cad4a5ed6ac58784690b59655 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 8 Sep 2023 15:49:01 -0300
Subject: [PATCH 205/268] fixing "logged" label bug

---
 src/antelope/stores/balances.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index cff914f50..86333b41d 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -273,7 +273,7 @@ export const useBalancesStore = defineStore(store_name, {
             subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
                 this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
                 if (receipt.status === 1) {
-                    this.updateBalancesForAccount('logged', account);
+                    this.updateBalancesForAccount(CURRENT_CONTEXT, account);
                 }
                 return receipt;
             });

From cff8c5a1f7bd760fe2dbefdc086549682d953e3c Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 8 Sep 2023 16:51:31 -0300
Subject: [PATCH 206/268] restoring testing app_id

---
 env.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/env.js b/env.js
index 7b0bd7194..6d267adee 100644
--- a/env.js
+++ b/env.js
@@ -22,8 +22,7 @@ const TESTNET = {
     HYPERION_ENDPOINT: 'https://testnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer-test.telos.net',
     CHAIN_NAME: 'telos-testnet',
-    // APP_OREID_APP_ID: 't_75a4d9233ec441d18c4221e92b379197',
-    APP_OREID_APP_ID: 't_23991cde82994c88bb582c019a9c45e1',
+    APP_OREID_APP_ID: 't_75a4d9233ec441d18c4221e92b379197',
 };
 
 const MAINNET = {

From d2e054e2ed65f2d96baf5d2592998c93730f7549 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 8 Sep 2023 20:02:59 -0300
Subject: [PATCH 207/268] rebasing with develop

---
 src/antelope/stores/rex.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index db6214b7f..76096f5c4 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -118,13 +118,6 @@ export const useRexStore = defineStore(store_name, {
             const totalStaking = await contract.totalAssets();
             this.setTotalStaking(label, totalStaking);
         },
-        async updateRexData(label: string) {
-            this.trace('updateRexData', label);
-            const account = useAccountStore().getAccount(label);
-            if (account) {
-                await this.updateRexDataForAccount(label, account);
-            }
-        },
         /**
          * This method should be called to update the REX data for a given context.
          * @param label identifies the context (account and network) for the data

From 6fa9330b5d8aa812cabfabca4c6ecdfae747a43a Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sat, 9 Sep 2023 17:38:16 -0300
Subject: [PATCH 208/268] restoring the header total fiat amount component

---
 src/pages/evm/staking/StakingPageHeader.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 249b7a7a5..98edcb318 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -235,6 +235,10 @@ function prettyPrintToken(amount: BigNumber | undefined, symbol: string) {
 
 <template>
 <div class="c-staking-header">
+    <div class="text-center q-mb-xl">
+        <h5>{{ $t('evm_stake.total_of_staked_unstaking_and_withdrawable', { token: systemToken.name }) }}</h5>
+        <h1 class="u-text--high-contrast">{{ prettyPrintToken(totalFiatValueBn, fiatCurrency) }}</h1>
+    </div>
     <ScrollableInfoCards class="c-staking-header__cards-first-line" :cards="firstLineData" />
     <ScrollableInfoCards class="c-staking-header__cards-second-line" :cards="secondLineData" />
 </div>

From ddefee502bc8a84efb764a94b7119490e2a058fe Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sun, 3 Sep 2023 15:40:24 -0300
Subject: [PATCH 209/268] save WIP - unstaking tab

---
 src/antelope/stores/rex.ts            | 26 +++++++++++++++++++++++++-
 src/i18n/en-us/index.js               |  3 +++
 src/pages/evm/staking/StakingPage.vue |  3 ++-
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 76096f5c4..76fa4d3dd 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -215,7 +215,7 @@ export const useRexStore = defineStore(store_name, {
             return response;
         },
         /**
-         * Performs the staking of System Tokens for a giuven account on the REX system of a given network.
+         * Performs the staking of System Tokens for a given account on the REX system of a given network.
          * @param label identifies the context (account-network) for the data
          * @param amount the amount of tokens to stake
          * @returns the transaction response holding the hash and a wait method to subscribe to the transaction receipt
@@ -238,6 +238,30 @@ export const useRexStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading(funcname);
             }
         },
+        /**
+         * Performs the unstaking of Staked System tokens for a given account on the REX system of a given network.
+         * @param label identifies the context (account-network) for the data
+         * @param amount the amount of tokens to unstake
+         * @returns the transaction response holding the hash and a wait method to subscribe to the transaction receipt
+         */
+        async unstakeEVMSystemTokens(label: string, amount: ethers.BigNumber): Promise<TransactionResponse> {
+            const funcname = 'unstakeEVMSystemTokens';
+            this.trace(funcname, label, amount.toString());
+
+            try {
+                useFeedbackStore().setLoading(funcname);
+                const account = useAccountStore().getAccount(label);
+                const authenticator = useAccountStore().getEVMAuthenticator(label);
+                return await authenticator.unstakeSystemTokens(amount)
+                    .then(r => this.subscribeForTransactionReceipt(account, r as TransactionResponse));
+            } catch (error) {
+                const trxError = getAntelope().config.wrapError('antelope.evm.error_wrap_failed', error);
+                getAntelope().config.transactionErrorHandler(trxError, funcname);
+                throw trxError;
+            } finally {
+                useFeedbackStore().unsetLoading(funcname);
+            }
+        },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
             const num = parseFloat(ethers.utils.formatUnits(withdrawable, this.getStakingDecimals()));
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 8dbb0ddfe..89c89ee16 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -228,6 +228,9 @@ export default {
         stake_sidebar_content_fragment_3: 'and various DeFi applications, further increasing yield. As the reward pool increases, the TLOS to sTLOS conversion rate will change over time. Therefore, the amount of sTLOS received is smaller than the staked TLOS.',
         stake_sidebar_content_fragment_4_bold: ' Rewards will be auto-compounded. ',
         stake_sidebar_content_fragment_5: 'No further action is required.',
+        unstake_input_label: 'Unstaking Amount',
+        unstake: 'Unstake',
+        unstake_button_label: 'Unstake {stakedSymbol} to {systemSymbol}',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index 374dd8eef..96f132fb6 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -2,6 +2,7 @@
 import AppPage from 'components/evm/AppPage.vue';
 import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
 import StakingTab from 'pages/evm/staking/StakingTab.vue';
+import UnstakingTab from 'pages/evm/staking/UnstakingTab.vue';
 
 const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
@@ -17,7 +18,7 @@ const tabs = ['stake', 'unstake', 'withdraw'];
     </template>
 
     <template v-slot:unstake>
-        <p>unstake tab</p>
+        <UnstakingTab />
     </template>
 
     <template v-slot:withdraw>

From 1408962e1b6033a45e67410dd0b23cf11a2ffd92 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sat, 9 Sep 2023 17:36:50 -0300
Subject: [PATCH 210/268] adding unstaking tab fully functional

---
 src/i18n/en-us/index.js                |  3 +
 src/pages/evm/staking/UnstakingTab.vue | 84 +++++++++++---------------
 2 files changed, 39 insertions(+), 48 deletions(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 89c89ee16..c4b1caefd 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -231,6 +231,9 @@ export default {
         unstake_input_label: 'Unstaking Amount',
         unstake: 'Unstake',
         unstake_button_label: 'Unstake {stakedSymbol} to {systemSymbol}',
+        unstake_sidebar_content_fragment_1: 'Unstaked TLOS will',
+        unstake_sidebar_content_fragment_2_bold: ' remain locked for a period of 10 days, ',
+        unstake_sidebar_content_fragment_3: 'after which it can be withdrawn to your account from the Withdraw tab.',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index f5bb4593e..c1c1c2cba 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -18,7 +18,6 @@ import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
 import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
 import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
-import { AntelopeError } from 'src/antelope/types';
 
 const label = 'current';
 
@@ -43,43 +42,35 @@ const stakedTokenDecimals = stakedToken.decimals;
 const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
 const inputModelValue = ref(ethers.constants.Zero);
 const estimatedGas = ref(ethers.constants.Zero);
-const stakedRatio = computed(() => chainStore.getStakedRatio(label));
+const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const outputModelValue = computed(() => {
-    if (stakedRatio.value.isZero()) {
+    if (unstakedRatio.value.isZero()) {
         return ethers.constants.Zero;
     }
-    const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
+    const output = inputModelValue.value.mul(unstakedRatio.value).div(oneEth);
     return output;
 });
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
 const fiatCurrency = computed(() => userStore.fiatCurrency);
-const systemTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
-    balance => balance.token.contract === systemToken.address)[0],
+const stakedTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
+    balance => balance.token.contract === stakedToken.address)[0],
 );
-const systemTokenFiatPrice = computed(() => systemTokenBalanceInfo.value?.token.price.getAmountInFiatStr(1) ?? '1');
-const systemTokenBalance = computed(() => systemTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
+// const systemTokenFiatPrice = computed(() => stakedTokenBalanceInfo.value?.token.price.getAmountInFiatStr(1) ?? '1');
+const stakedTokenBalance = computed(() => stakedTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
 const sidebarContent = computed(() => {
     const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
     const content = [{
         text: $t(
-            'evm_stake.stake_sidebar_content_fragment_1',
-            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
-        ),
-    }, {
-        text: $t('evm_stake.stake_sidebar_content_fragment_2_bold'),
-        bold: true,
-    }, {
-        text: $t(
-            'evm_stake.stake_sidebar_content_fragment_3',
-            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+            'evm_stake.unstake_sidebar_content_fragment_1',
+            { systemSymbol: systemTokenSymbol },
         ),
     }, {
-        text: $t('evm_stake.stake_sidebar_content_fragment_4_bold'),
+        text: $t('evm_stake.unstake_sidebar_content_fragment_2_bold'),
         bold: true,
     }, {
         text: $t(
-            'evm_stake.stake_sidebar_content_fragment_5',
+            'evm_stake.unstake_sidebar_content_fragment_3',
             { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
         ),
     }];
@@ -89,8 +80,8 @@ const sidebarContent = computed(() => {
         content,
     };
 });
-const availableTostake = computed(() => {
-    const available = systemTokenBalance.value.sub(estimatedGas.value);
+const availableToUnstake = computed(() => {
+    const available = stakedTokenBalance.value.sub(estimatedGas.value);
 
     if (available.lt(0)) {
         return ethers.constants.Zero;
@@ -98,10 +89,10 @@ const availableTostake = computed(() => {
     return available;
 });
 const formIsValid = computed(() =>
-    !inputModelValue.value.isZero() &&
-    inputModelValue.value.lt(availableTostake.value),
+    !outputModelValue.value.isZero() &&
+    inputModelValue.value.lt(availableToUnstake.value),
 );
-const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeEVMSystemTokens'));
+const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('unstakeEVMSystemTokens'));
 
 
 // methods
@@ -128,11 +119,11 @@ async function handleCtaClick() {
 
     if (formIsValid.value) {
         try {
-            const tx = await useRexStore().stakeEVMSystemTokens(label, inputModelValue.value);
-            const formattedAmount = formatWei(inputModelValue.value, systemTokenDecimals, WEI_PRECISION);
+            const tx = await useRexStore().unstakeEVMSystemTokens(label, inputModelValue.value);
+            const formattedAmount = formatWei(inputModelValue.value, stakedTokenDecimals, WEI_PRECISION);
 
             const dismiss = ant.config.notifyNeutralMessageHandler(
-                $t('notification.neutral_message_staking', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+                $t('notification.neutral_message_unstaking', { quantity: formattedAmount, symbol: stakedTokenSymbol }),
             );
 
             tx.wait().then(() => {
@@ -157,12 +148,12 @@ async function handleCtaClick() {
     <!-- convert ratio 1:stakedRatio -->
     <div class="row q-mb-xl">
         <div class="col-12">
-            <div class="c-stake-tab__badge-container">
+            <div class="c-unstake-tab__badge-container">
                 <ConversionRateBadge
-                    :token-one-symbol="systemTokenSymbol"
-                    :token-two-symbol="stakedTokenSymbol"
-                    :token-two-decimals="systemTokenDecimals"
-                    :token-two-amount="stakedRatio"
+                    :token-one-symbol="stakedTokenSymbol"
+                    :token-two-symbol="systemTokenSymbol"
+                    :token-two-decimals="stakedTokenDecimals"
+                    :token-two-amount="unstakedRatio"
                     :decimals="uiDecimals"
                 />
             </div>
@@ -174,16 +165,13 @@ async function handleCtaClick() {
         <div class="col-12">
             <CurrencyInput
                 v-model="inputModelValue"
-                :symbol="systemTokenSymbol"
-                :decimals="systemTokenDecimals"
+                :symbol="stakedTokenSymbol"
+                :decimals="stakedTokenDecimals"
                 :decimals-to-display="uiDecimals"
-                :secondary-currency-code="fiatCurrency"
-                :secondary-currency-decimals="2"
-                :secondary-currency-conversion-factor="systemTokenFiatPrice"
                 :locale="fiatLocale"
-                :label="$t('evm_stake.stake_input_label')"
-                :max-value="availableTostake"
-                class="c-stake-tab__input"
+                :label="$t('evm_stake.unstake_input_label')"
+                :max-value="availableToUnstake"
+                class="c-unstake-tab__input"
             />
         </div>
     </div>
@@ -205,12 +193,12 @@ async function handleCtaClick() {
         <div class="col-12">
             <CurrencyInput
                 v-model="outputModelValue"
-                :symbol="stakedTokenSymbol"
-                :decimals="stakedTokenDecimals"
+                :symbol="systemTokenSymbol"
+                :decimals="systemTokenDecimals"
                 :decimals-to-display="uiDecimals"
                 :locale="fiatLocale"
                 :label="$t('evm_stake.stake_input_label')"
-                class="c-stake-tab__input"
+                class="c-unstake-tab__input"
                 readonly="readonly"
             />
         </div>
@@ -219,14 +207,14 @@ async function handleCtaClick() {
     <!-- stake button -->
     <div class="row">
         <div class="col-12">
-            <div class="c-stake-tab__cta-container">
+            <div class="c-unstake-tab__cta-container">
                 <q-btn
                     color="primary"
                     :disable="!formIsValid"
                     :loading="ctaIsLoading"
-                    :label="$t('evm_stake.stake')"
+                    :label="$t('evm_stake.unstake')"
                     :aria-label="$t(
-                        'evm_stake.stake_button_label',
+                        'evm_stake.unstake_button_label',
                         { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
                     )"
                     @click="handleCtaClick"
@@ -238,7 +226,7 @@ async function handleCtaClick() {
 </template>
 
 <style lang="scss">
-.c-stake-tab {
+.c-unstake-tab {
     &__badge-container,
     &__cta-container,
     &__input {

From 8febc98a95da6c7b8449742cb4d227dd88d3e56f Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sat, 9 Sep 2023 19:49:51 -0300
Subject: [PATCH 211/268] final details

---
 src/antelope/stores/utils/trx-utils.ts | 2 --
 src/i18n/en-us/index.js                | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/antelope/stores/utils/trx-utils.ts b/src/antelope/stores/utils/trx-utils.ts
index 05dbe2633..9d7305fa0 100644
--- a/src/antelope/stores/utils/trx-utils.ts
+++ b/src/antelope/stores/utils/trx-utils.ts
@@ -13,8 +13,6 @@ export async function subscribeForTransactionReceipt(account: AccountModel, resp
         const provider = await authenticator.web3Provider();
         if (provider) {
             const whenConfirmed = provider.waitForTransaction(response.hash);
-            // TODO: remove this console error
-            console.error('subscribeForTransactionReceipt CONFIRMED!!', response.hash);
             // we add the wait method to the response,
             // so that the caller can subscribe to the confirmation event
             response.wait = async () => whenConfirmed;
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index c4b1caefd..74ed1ca9a 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -250,7 +250,7 @@ export default {
         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}</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>',

From 019fae065f65e7b8e121ebcba583523fbe4ce258 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sat, 9 Sep 2023 21:52:11 -0300
Subject: [PATCH 212/268] adding fiat value to unstaking output

---
 src/i18n/en-us/index.js                |  2 +
 src/pages/evm/staking/StakingPage.vue  |  3 +-
 src/pages/evm/staking/StakingTab.vue   |  2 +-
 src/pages/evm/staking/UnstakingTab.vue | 12 +++--
 src/pages/evm/staking/WithdrawTab.vue  | 63 ++++++++++++++++++++++++++
 5 files changed, 77 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/evm/staking/WithdrawTab.vue

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 74ed1ca9a..69da4f39e 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -220,6 +220,7 @@ export default {
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
         unstaking_period: '10 days',
         stake_input_label: 'Staking Amount',
+        stake_output_label: 'Staked Amount',
         stake: 'Stake',
         stake_button_label: 'Stake {systemSymbol} to {stakedSymbol}',
         stake_sidebar_title: 'Why stake {symbol}?',
@@ -229,6 +230,7 @@ export default {
         stake_sidebar_content_fragment_4_bold: ' Rewards will be auto-compounded. ',
         stake_sidebar_content_fragment_5: 'No further action is required.',
         unstake_input_label: 'Unstaking Amount',
+        unstake_output_label: 'Unstaked Amount',
         unstake: 'Unstake',
         unstake_button_label: 'Unstake {stakedSymbol} to {systemSymbol}',
         unstake_sidebar_content_fragment_1: 'Unstaked TLOS will',
diff --git a/src/pages/evm/staking/StakingPage.vue b/src/pages/evm/staking/StakingPage.vue
index 96f132fb6..680905422 100644
--- a/src/pages/evm/staking/StakingPage.vue
+++ b/src/pages/evm/staking/StakingPage.vue
@@ -3,6 +3,7 @@ import AppPage from 'components/evm/AppPage.vue';
 import StakingPageHeader from 'pages/evm/staking/StakingPageHeader.vue';
 import StakingTab from 'pages/evm/staking/StakingTab.vue';
 import UnstakingTab from 'pages/evm/staking/UnstakingTab.vue';
+import WithdrawTab from 'pages/evm/staking/WithdrawTab.vue';
 
 const tabs = ['stake', 'unstake', 'withdraw'];
 </script>
@@ -22,7 +23,7 @@ const tabs = ['stake', 'unstake', 'withdraw'];
     </template>
 
     <template v-slot:withdraw>
-        <p>withdraw tab</p>
+        <WithdrawTab />
     </template>
 </AppPage>
 </template>
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index 0935270f8..fd2e7804f 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -208,7 +208,7 @@ async function handleCtaClick() {
                 :decimals="stakedTokenDecimals"
                 :decimals-to-display="uiDecimals"
                 :locale="fiatLocale"
-                :label="$t('evm_stake.stake_input_label')"
+                :label="$t('evm_stake.stake_output_label')"
                 class="c-stake-tab__input"
                 readonly="readonly"
             />
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index c1c1c2cba..aa2fb217b 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -53,10 +53,13 @@ const outputModelValue = computed(() => {
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
 const fiatCurrency = computed(() => userStore.fiatCurrency);
+const systemTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
+    balance => balance.token.contract === systemToken.address)[0],
+);
+const systemTokenFiatPrice = computed(() => systemTokenBalanceInfo.value?.token.price.getAmountInFiatStr(1) ?? '1');
 const stakedTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
     balance => balance.token.contract === stakedToken.address)[0],
 );
-// const systemTokenFiatPrice = computed(() => stakedTokenBalanceInfo.value?.token.price.getAmountInFiatStr(1) ?? '1');
 const stakedTokenBalance = computed(() => stakedTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
 const sidebarContent = computed(() => {
     const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
@@ -196,15 +199,18 @@ async function handleCtaClick() {
                 :symbol="systemTokenSymbol"
                 :decimals="systemTokenDecimals"
                 :decimals-to-display="uiDecimals"
+                :secondary-currency-code="fiatCurrency"
+                :secondary-currency-decimals="2"
+                :secondary-currency-conversion-factor="systemTokenFiatPrice"
                 :locale="fiatLocale"
-                :label="$t('evm_stake.stake_input_label')"
+                :label="$t('evm_stake.unstake_output_label')"
                 class="c-unstake-tab__input"
                 readonly="readonly"
             />
         </div>
     </div>
 
-    <!-- stake button -->
+    <!-- unstake button -->
     <div class="row">
         <div class="col-12">
             <div class="c-unstake-tab__cta-container">
diff --git a/src/pages/evm/staking/WithdrawTab.vue b/src/pages/evm/staking/WithdrawTab.vue
new file mode 100644
index 000000000..51fd38928
--- /dev/null
+++ b/src/pages/evm/staking/WithdrawTab.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ethers } from 'ethers';
+
+import {
+    CURRENT_CONTEXT,
+    getAntelope,
+    useAccountStore,
+    useBalancesStore,
+    useChainStore,
+    useRexStore,
+    useUserStore,
+} from 'src/antelope';
+
+import EVMSidebarPage from 'src/layouts/EVMSidebarPage.vue';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
+import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
+import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+
+const label = 'current';
+
+const { t: $t } = useI18n();
+const uiDecimals = 2;
+const ant = getAntelope();
+const chainStore = useChainStore();
+const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
+const userStore = useUserStore();
+const balanceStore = useBalancesStore();
+const accountStore = useAccountStore();
+
+const systemToken = chainSettings.getSystemToken();
+const systemTokenSymbol = systemToken.symbol;
+const systemTokenDecimals = systemToken.decimals;
+const stakedToken = chainSettings.getStakedSystemToken();
+const stakedTokenSymbol = stakedToken.symbol;
+const stakedTokenDecimals = stakedToken.decimals;
+
+</script>
+
+<template>
+<div class="c-withdraw-tab">
+    withdraw
+</div>
+</template>
+
+<style lang="scss">
+.c-withdraw-tab {
+    &__badge-container,
+    &__cta-container,
+    &__input {
+        max-width: 320px;
+        margin: auto;
+    }
+
+    &__badge-container,
+    &__cta-container {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+</style>

From 70c248a51d9240e1f6998ac5885c0675a6948e78 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sun, 10 Sep 2023 15:27:24 -0300
Subject: [PATCH 213/268] adding margin top to unstake btn

---
 src/pages/evm/staking/UnstakingTab.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index aa2fb217b..91feffd3f 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -245,5 +245,8 @@ async function handleCtaClick() {
         display: flex;
         justify-content: flex-end;
     }
+    &__cta-container {
+        margin-top: 8px;
+    }
 }
 </style>

From 42b42b09deb71f45f27018a30870fd17e466ed89 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sun, 10 Sep 2023 15:23:33 -0300
Subject: [PATCH 214/268] saving WIP - staking-withdraw tab

---
 src/antelope/stores/rex.ts            |   7 +-
 src/antelope/types/EvmRexDeposit.ts   |   6 ++
 src/antelope/types/index.ts           |   1 +
 src/assets/icon--calendar-check.svg   |   3 +
 src/assets/icon--calendar-clock.svg   |   3 +
 src/css/components/_notification.scss |   6 ++
 src/css/components/_q-btn.scss        |   0
 src/css/global/_colors.scss           |   5 ++
 src/i18n/en-us/index.js               |   2 +
 src/pages/evm/staking/WithdrawRaw.vue | 117 ++++++++++++++++++++++++++
 src/pages/evm/staking/WithdrawTab.vue |  64 +++++++++++++-
 11 files changed, 206 insertions(+), 8 deletions(-)
 create mode 100644 src/antelope/types/EvmRexDeposit.ts
 create mode 100644 src/assets/icon--calendar-check.svg
 create mode 100644 src/assets/icon--calendar-clock.svg
 create mode 100644 src/css/components/_q-btn.scss
 create mode 100644 src/pages/evm/staking/WithdrawRaw.vue

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 76fa4d3dd..5fca310b0 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -13,7 +13,7 @@ import {
     createTraceFunction,
     useFeedbackStore,
 } from 'src/antelope/stores/feedback';
-import { AntelopeError, Label, TransactionResponse } from 'src/antelope/types';
+import { AntelopeError, EvmRexDeposit, Label, TransactionResponse } from 'src/antelope/types';
 import { toRaw } from 'vue';
 import { AccountModel, useAccountStore } from 'src/antelope/stores/account';
 import { CURRENT_CONTEXT, getAntelope, useBalancesStore, useChainStore, useEVMStore } from 'src/antelope';
@@ -22,11 +22,6 @@ import { WEI_PRECISION } from 'src/antelope/stores/utils';
 import { subscribeForTransactionReceipt } from 'src/antelope/stores/utils/trx-utils';
 
 
-export interface EvmRexDeposit {
-    amount: ethers.BigNumber;
-    until: ethers.BigNumber;
-}
-
 export interface RexModel {
     withdrawable: ethers.BigNumber;
     balance: ethers.BigNumber;
diff --git a/src/antelope/types/EvmRexDeposit.ts b/src/antelope/types/EvmRexDeposit.ts
new file mode 100644
index 000000000..5f0a4b849
--- /dev/null
+++ b/src/antelope/types/EvmRexDeposit.ts
@@ -0,0 +1,6 @@
+import { ethers } from 'ethers';
+
+export interface EvmRexDeposit {
+    amount: ethers.BigNumber;
+    until: ethers.BigNumber;
+}
diff --git a/src/antelope/types/index.ts b/src/antelope/types/index.ts
index e01693b14..9bd9f7481 100644
--- a/src/antelope/types/index.ts
+++ b/src/antelope/types/index.ts
@@ -8,6 +8,7 @@ export * from 'src/antelope/types/ChainSettings';
 export * from 'src/antelope/types/EvmBlockData';
 export * from 'src/antelope/types/EvmContractData';
 export * from 'src/antelope/types/EvmLog';
+export * from 'src/antelope/types/EvmRexDeposit';
 export * from 'src/antelope/types/EvmTransaction';
 export * from 'src/antelope/types/ExceptionError';
 export * from 'src/antelope/types/Filters';
diff --git a/src/assets/icon--calendar-check.svg b/src/assets/icon--calendar-check.svg
new file mode 100644
index 000000000..4b75d2f95
--- /dev/null
+++ b/src/assets/icon--calendar-check.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 3H18V1H16V3H8V1H6V3H5C3.9 3 3 3.9 3 5V19C3 20.11 3.9 21 5 21H19C20.11 21 21 20.11 21 19V5C21 3.9 20.11 3 19 3ZM19 19H5V9H19V19ZM5 7V5H19V7H5ZM10.56 17.46L16.5 11.53L15.43 10.47L10.56 15.34L8.45 13.23L7.39 14.29L10.56 17.46Z" fill="#571AFF"/>
+</svg>
diff --git a/src/assets/icon--calendar-clock.svg b/src/assets/icon--calendar-clock.svg
new file mode 100644
index 000000000..036b106cb
--- /dev/null
+++ b/src/assets/icon--calendar-clock.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1V3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H11.1C12.36 22.24 14.09 23 16 23C19.87 23 23 19.87 23 16C23 14.09 22.24 12.36 21 11.1V5C21 3.9 20.11 3 19 3H18V1H16V3H8V1M5 5H19V7H5M5 9H19V9.67C18.09 9.24 17.07 9 16 9C12.13 9 9 12.13 9 16C9 17.07 9.24 18.09 9.67 19H5M16 11.15C18.68 11.15 20.85 13.32 20.85 16C20.85 18.68 18.68 20.85 16 20.85C13.32 20.85 11.15 18.68 11.15 16C11.15 13.32 13.32 11.15 16 11.15ZM15 13V16.69L18.19 18.53L18.94 17.23L16.5 15.82V13H15Z" fill="#505DCD"/>
+</svg>
diff --git a/src/css/components/_notification.scss b/src/css/components/_notification.scss
index 3841062a0..89717fdcf 100644
--- a/src/css/components/_notification.scss
+++ b/src/css/components/_notification.scss
@@ -102,3 +102,9 @@
     }
 }
 
+.q-btn.bg-primary.disabled {
+    background: var(--disabled-bg) !important;
+    color: var(--disabled-text) !important;
+    font-weight: 600;
+    cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/src/css/components/_q-btn.scss b/src/css/components/_q-btn.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/css/global/_colors.scss b/src/css/global/_colors.scss
index 79e9cb4e3..723f0a977 100644
--- a/src/css/global/_colors.scss
+++ b/src/css/global/_colors.scss
@@ -31,6 +31,8 @@ $saveBtn: #2e1f4f;
     $native-contrast-text-color: #F7F5FF;
     $menu-text: #fff;
     $canvas: #fff;
+    $disabled-bg: #EAE9EF;
+    $disabled-text: #7F7C86;
 
     --text-high-contrast: #{$high-contrast-text-color};
     --text-default-contrast: #{$default-contrast-text-color};
@@ -55,6 +57,9 @@ $saveBtn: #2e1f4f;
     --bg-color-hover: #{$page-header};
 
     --header-bg-color: #{$page-header};
+
+    --disabled-bg: #{$disabled-bg};
+    --disabled-text: #{$disabled-text};
 }
 
 // Dark Mode
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 69da4f39e..3583855ec 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -236,6 +236,8 @@ export default {
         unstake_sidebar_content_fragment_1: 'Unstaked TLOS will',
         unstake_sidebar_content_fragment_2_bold: ' remain locked for a period of 10 days, ',
         unstake_sidebar_content_fragment_3: 'after which it can be withdrawn to your account from the Withdraw tab.',
+        withdraw_button_disabled: 'Nothing to withdraw',
+        withdraw_button_enabled: 'Withdraw {amount} {symbol}',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/WithdrawRaw.vue b/src/pages/evm/staking/WithdrawRaw.vue
new file mode 100644
index 000000000..6ffbad867
--- /dev/null
+++ b/src/pages/evm/staking/WithdrawRaw.vue
@@ -0,0 +1,117 @@
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import InlineSvg from 'vue-inline-svg';
+
+import { useChainStore, useEVMStore, useUserStore } from 'src/antelope';
+
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { EvmRexDeposit } from 'src/antelope/types';
+import ToolTip from 'components/ToolTip.vue';
+import { prettyPrintCurrency, promptAddToMetamask } from 'src/antelope/stores/utils/currency-utils';
+import ExternalLink from 'components/ExternalLink.vue';
+
+const evmStore = useEVMStore();
+const userStore = useUserStore();
+const { fiatLocale, fiatCurrency } = userStore;
+
+export default defineComponent({
+    name: 'WalletBalanceRow',
+    components: {
+        ExternalLink,
+        InlineSvg,
+    },
+    data() {
+        return {
+            iconSrc: 'src/assets/icon--calendar-clock.svg',
+            iconAlt: '',
+            withdrawalStatus: 'Unstaking for 2 days 3 hours',
+            withdrawalDate: 'Withdraw it on Feb 12, 2023 09:32 AM',
+            externalHash: '0x3db63fd9fc379161f2e2f6381153b2a77923f8b65dd04723dd4ab6b8ef3fbc06',
+            externalUrl: 'https://teloscan.io/tx/0x3db63fd9fc379161f2e2f6381153b2a77923f8b65dd04723dd4ab6b8ef3fbc06',
+            externalPurpose: 'View on Teloscan',
+        };
+    },
+    props: {
+        withdrawal: {
+            type: Object as PropType<EvmRexDeposit>,
+            required: true,
+        },
+    },
+    computed: {
+    },
+    methods: {
+    },
+});
+</script>
+
+<template>
+<div class="c-stake-withdrawal-row">
+    <div class="c-stake-withdrawal-row__left-container">
+        <div class="c-stake-withdrawal-row__left-icon">
+            <InlineSvg
+                :src="require('src/assets/icon--calendar-clock.svg')"
+                :alt="$t(iconAlt)"
+                class="c-stake-withdrawal-row__icon"
+                height="24"
+                width="24"
+                aria-hidden="true"
+            />
+        </div>
+        <div class="c-stake-withdrawal-row__left-content">
+            <div>
+                <span class="c-stake-withdrawal-row__withdrawal-status">{{ withdrawalStatus }}</span>
+            </div>
+            <div>
+                <span class="o-text--small q-mr-md">{{ withdrawalDate }}</span>
+                <ExternalLink :text="externalHash" :url="externalUrl" :purpose="externalPurpose" />
+            </div>
+        </div>
+    </div>
+
+    <div class="c-stake-withdrawal-row__right-container">
+    </div>
+</div>
+</template>
+
+<style lang="scss">
+.c-stake-withdrawal-row {
+    $this: &;
+
+    display: flex;
+    justify-content: space-between;
+    border-radius: 4px;
+    border-bottom: 2px solid var(--header-bg-color);
+    padding: 24px 4px;
+    overflow-x: hidden;
+    max-width: 100%;
+    min-width: 0;
+
+    &__left-container,
+    &__right-container {
+        display: flex;
+        width: max-content;
+    }
+
+    &__left-container {
+        @include text--paragraph;
+        color: var(--text-default-contrast);
+        display: flex;
+        align-items: flex-start;
+        gap: 6px;
+
+        white-space: nowrap;
+    }
+
+    &__withdrawal-status {
+        @include text--paragraph-bold;
+    }
+
+    &__left-content {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+
+</style>
diff --git a/src/pages/evm/staking/WithdrawTab.vue b/src/pages/evm/staking/WithdrawTab.vue
index 51fd38928..a1fba0786 100644
--- a/src/pages/evm/staking/WithdrawTab.vue
+++ b/src/pages/evm/staking/WithdrawTab.vue
@@ -13,7 +13,7 @@ import {
     useUserStore,
 } from 'src/antelope';
 
-import EVMSidebarPage from 'src/layouts/EVMSidebarPage.vue';
+import WithdrawRaw from 'src/pages/evm/staking/WithdrawRaw.vue';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
 import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
@@ -37,16 +37,63 @@ const stakedToken = chainSettings.getStakedSystemToken();
 const stakedTokenSymbol = stakedToken.symbol;
 const stakedTokenDecimals = stakedToken.decimals;
 
+const loading = ref(false);
+const allWithdrawals = ref([{} as any]);
+const withdrawEnabled = ref(false);
+
+const withdraw = () => {
+    if (!withdrawEnabled.value) {
+        return;
+    }
+    console.log('you pressed withdraw');
+};
+
+
 </script>
 
 <template>
 <div class="c-withdraw-tab">
-    withdraw
+    <div class="c-withdraw-tab__withdraw-btn">
+        <q-btn
+            :label="$t(withdrawEnabled ? 'evm_stake.withdraw_button_enabled' : 'evm_stake.withdraw_button_disabled', {
+                amount: formatWei(1000000000000000, systemTokenDecimals, uiDecimals),
+                symbol: systemTokenSymbol
+            })"
+            :disable="!withdrawEnabled"
+            color="primary"
+            @click="withdraw"
+        />
+    </div>
+
+    <div class="c-withdraw-tab__row">
+        <WithdrawRaw
+            v-for="(withdrawal, index) in allWithdrawals"
+            :key="`withdrawal-${index}`"
+            :withdrawal="withdrawal"
+            class="q-mb-xs"
+        />
+    </div>
+    <div
+        :class="{
+            'c-withdraw-tab__loading': true,
+            'c-withdraw-tab__loading--hide': !loading
+        }"
+    >
+        <q-spinner-dots
+            color="primary"
+            size="2em"
+        />
+    </div>
+
 </div>
 </template>
 
 <style lang="scss">
 .c-withdraw-tab {
+    &__row {
+        max-width: 800px;
+        margin: auto;
+    }
     &__badge-container,
     &__cta-container,
     &__input {
@@ -59,5 +106,18 @@ const stakedTokenDecimals = stakedToken.decimals;
         display: flex;
         justify-content: flex-end;
     }
+    &__loading {
+        opacity: 1;
+        text-align: center;
+        margin-top: 20px;
+        transition: opacity 0.4s linear 0.8s;
+        &--hide {
+            opacity: 0;
+        }
+    }
+    &__withdraw-btn {
+        text-align: center;
+        margin-bottom: 20px;
+    }
 }
 </style>

From 8108e888c446679add98e436e8e79bdce7a9eba2 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 11 Sep 2023 09:42:26 -0300
Subject: [PATCH 215/268] saving WIP

---
 src/pages/evm/staking/WithdrawRaw.vue | 106 ++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)

diff --git a/src/pages/evm/staking/WithdrawRaw.vue b/src/pages/evm/staking/WithdrawRaw.vue
index 6ffbad867..e191ff8aa 100644
--- a/src/pages/evm/staking/WithdrawRaw.vue
+++ b/src/pages/evm/staking/WithdrawRaw.vue
@@ -39,6 +39,56 @@ export default defineComponent({
         },
     },
     computed: {
+        truncatePrimaryValue(): boolean {
+            const isMobile = this.$q.screen.lt.sm;
+
+            if (!isMobile) {
+                return false;
+            } else {
+                return this.primaryAmount.toString().length > 8;
+            }
+        },
+        truncateSecondaryValue(): boolean {
+            const isMobile = this.$q.screen.lt.sm;
+
+            if (!isMobile) {
+                return false;
+            } else {
+                return this.secondaryAmount.toString().length > 7;
+            }
+        },
+        primaryAmount(): number | string {
+            // the top value is fiat if there is a fiat value for the token
+            // the top (only) value is the token balance iff token has no reliable fiat value.
+            return '100';
+        },
+        prettyPrimaryAmount(): string {
+            return prettyPrintCurrency(
+                +this.primaryAmount,
+                2,
+                fiatLocale,
+                this.truncatePrimaryValue,
+                fiatCurrency,
+                false,
+            );
+        },
+        secondaryAmount(): number | string {
+            return '300';
+        },
+        prettySecondaryAmount(): string {
+            const noSecondaryAmount = typeof this.secondaryAmount === 'string' && !this.secondaryAmount;
+            if (noSecondaryAmount || !this.tokenHasFiatValue) {
+                return '';
+            }
+
+            if (this.truncateSecondaryValue) {
+                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, true).concat(` ${this.token.symbol}`);
+            } else {
+                const formatted = prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale);
+
+                return `${formatted} ${this.token.symbol}`;
+            }
+        },
     },
     methods: {
     },
@@ -70,6 +120,62 @@ export default defineComponent({
     </div>
 
     <div class="c-stake-withdrawal-row__right-container">
+        <div ref="balance-container" class="c-stake-withdrawal-row__balance-container">
+            <div class="c-stake-withdrawal-row__primary-amount">
+                {{ prettyPrimaryAmount }}
+            </div>
+            <span v-if="secondaryAmount !== ''" class="c-stake-withdrawal-row__secondary-amount">
+                <ToolTip
+                    v-if="truncateSecondaryValue"
+                    :text="formatTooltipBalance(+secondaryAmount, !$q.screen.lt.sm)"
+                    :hide-icon="true"
+                >
+                    {{ prettySecondaryAmount }}
+                </ToolTip>
+                <template v-else>
+                    {{ prettySecondaryAmount }}
+                </template>
+            </span>
+        </div>
+
+        <q-btn
+            flat
+            dense
+            no-icon-animation
+            icon="more_vert"
+            class="c-stake-withdrawal-row__overflow"
+            :aria-label="$t('evm_wallet.balance_row_actions_aria')"
+        >
+            <q-menu anchor="bottom end" self="top right" :offset="[0, 16]">
+                <ul class="c-stake-withdrawal-row__overflow-ul">
+                    <li
+                        v-for="(item, index) in overflowMenuItems"
+                        :key="`overflow-item-${index}`"
+                        v-close-popup
+                        class="c-stake-withdrawal-row__overflow-li"
+                        tabindex="0"
+                        :aria-labelledby="`overflow-text-${index}`"
+                        @click="item.url ? goToLink(item.url) : promptAddToMetamask()"
+                        @keydown.enter.space="item.url ? goToLink(item.url) : promptAddToMetamask()"
+                    >
+                        <div class="c-stake-withdrawal-row__overflow-icon-wrapper">
+                            <InlineSvg
+                                :src="item.icon"
+                                :class="{
+                                    'c-stake-withdrawal-row__overflow-icon': true,
+                                    'c-stake-withdrawal-row__overflow-icon--stroke': item.strokeIcon,
+                                }"
+                                aria-hidden="true"
+                            />
+                        </div>
+
+                        <span :id="`overflow-text-${index}`" class="c-stake-withdrawal-row__overflow-text">
+                            {{ item.label }}
+                        </span>
+                    </li>
+                </ul>
+            </q-menu>
+        </q-btn>
     </div>
 </div>
 </template>

From 854140db4c2a7acedc51fd5fed608f30f288cb1e Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 11 Sep 2023 09:47:14 -0300
Subject: [PATCH 216/268] addressing Don's feedback

---
 src/antelope/stores/utils/trx-utils.ts      | 2 --
 src/pages/evm/staking/StakingPageHeader.vue | 5 +----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/antelope/stores/utils/trx-utils.ts b/src/antelope/stores/utils/trx-utils.ts
index 05dbe2633..9d7305fa0 100644
--- a/src/antelope/stores/utils/trx-utils.ts
+++ b/src/antelope/stores/utils/trx-utils.ts
@@ -13,8 +13,6 @@ export async function subscribeForTransactionReceipt(account: AccountModel, resp
         const provider = await authenticator.web3Provider();
         if (provider) {
             const whenConfirmed = provider.waitForTransaction(response.hash);
-            // TODO: remove this console error
-            console.error('subscribeForTransactionReceipt CONFIRMED!!', response.hash);
             // we add the wait method to the response,
             // so that the caller can subscribe to the confirmation event
             response.wait = async () => whenConfirmed;
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 98edcb318..da7ffdd91 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -178,10 +178,7 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
-// creatmos un interval que cada 5 segundos verifique si cada uno de los loadings es true o false.
-// por cada loading que encontremos en true, debemos llamar a actualizar las dependendicas de ese loading
-// si todos los loadings son false, entonces podemos parar el intervalo
-
+// is interval is mean to ensure all data is eventually loaded
 const intervalTimer = setInterval(() => {
 
     // is staking still loading?

From 77502f973fc0fc8937c155c5a4f11cd4d87ad78b Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Mon, 11 Sep 2023 15:19:38 -0400
Subject: [PATCH 217/268] cleanup

---
 src/pages/evm/staking/StakingTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index 0935270f8..7e3c53641 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -42,6 +42,7 @@ const stakedTokenDecimals = stakedToken.decimals;
 const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
 const inputModelValue = ref(ethers.constants.Zero);
 const estimatedGas = ref(ethers.constants.Zero);
+// computed
 const stakedRatio = computed(() => chainStore.getStakedRatio(label));
 const outputModelValue = computed(() => {
     if (stakedRatio.value.isZero()) {
@@ -50,7 +51,6 @@ const outputModelValue = computed(() => {
     const output = inputModelValue.value.mul(stakedRatio.value).div(oneEth);
     return output;
 });
-// computed
 const fiatLocale = computed(() => userStore.fiatLocale);
 const fiatCurrency = computed(() => userStore.fiatCurrency);
 const systemTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(

From c526beac99d811ff2a291abca3ae8c199b8b42ae Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 11 Sep 2023 18:33:10 -0300
Subject: [PATCH 218/268] fixing the name

---
 src/antelope/wallets/authenticators/OreIdAuth.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index 1ec405be3..ff9050e1d 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -382,7 +382,7 @@ export class OreIdAuth extends EVMAuthenticator {
             'contract': {
                 abi,
                 'parameters': [value],
-                'method': 'withdraw',
+                'method': stlosAbiWithdraw[0].name,
             },
         } as unknown as JSONObject;
 

From da4d595794543c151d35bddedce19f8eec744dc3 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 11 Sep 2023 23:13:46 -0300
Subject: [PATCH 219/268] saving wip - withdraw tap - first raw

---
 src/css/components/_notification.scss |  7 ---
 src/css/components/_q-btn.scss        |  0
 src/css/global/_colors.scss           |  4 --
 src/pages/evm/staking/WithdrawRaw.vue | 90 ++++++++++++++-------------
 4 files changed, 47 insertions(+), 54 deletions(-)
 delete mode 100644 src/css/components/_q-btn.scss

diff --git a/src/css/components/_notification.scss b/src/css/components/_notification.scss
index 89717fdcf..934b770ab 100644
--- a/src/css/components/_notification.scss
+++ b/src/css/components/_notification.scss
@@ -101,10 +101,3 @@
         width: 0%;
     }
 }
-
-.q-btn.bg-primary.disabled {
-    background: var(--disabled-bg) !important;
-    color: var(--disabled-text) !important;
-    font-weight: 600;
-    cursor: not-allowed;
-}
\ No newline at end of file
diff --git a/src/css/components/_q-btn.scss b/src/css/components/_q-btn.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/css/global/_colors.scss b/src/css/global/_colors.scss
index 723f0a977..6b8144711 100644
--- a/src/css/global/_colors.scss
+++ b/src/css/global/_colors.scss
@@ -31,8 +31,6 @@ $saveBtn: #2e1f4f;
     $native-contrast-text-color: #F7F5FF;
     $menu-text: #fff;
     $canvas: #fff;
-    $disabled-bg: #EAE9EF;
-    $disabled-text: #7F7C86;
 
     --text-high-contrast: #{$high-contrast-text-color};
     --text-default-contrast: #{$default-contrast-text-color};
@@ -58,8 +56,6 @@ $saveBtn: #2e1f4f;
 
     --header-bg-color: #{$page-header};
 
-    --disabled-bg: #{$disabled-bg};
-    --disabled-text: #{$disabled-text};
 }
 
 // Dark Mode
diff --git a/src/pages/evm/staking/WithdrawRaw.vue b/src/pages/evm/staking/WithdrawRaw.vue
index e191ff8aa..dab796523 100644
--- a/src/pages/evm/staking/WithdrawRaw.vue
+++ b/src/pages/evm/staking/WithdrawRaw.vue
@@ -3,7 +3,7 @@ import { defineComponent, PropType } from 'vue';
 
 import InlineSvg from 'vue-inline-svg';
 
-import { useChainStore, useEVMStore, useUserStore } from 'src/antelope';
+import { CURRENT_CONTEXT, useChainStore, useEVMStore, useUserStore } from 'src/antelope';
 
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { EvmRexDeposit } from 'src/antelope/types';
@@ -13,12 +13,12 @@ import ExternalLink from 'components/ExternalLink.vue';
 
 const evmStore = useEVMStore();
 const userStore = useUserStore();
+const chainStore = useChainStore();
 const { fiatLocale, fiatCurrency } = userStore;
 
 export default defineComponent({
     name: 'WalletBalanceRow',
     components: {
-        ExternalLink,
         InlineSvg,
     },
     data() {
@@ -39,6 +39,11 @@ export default defineComponent({
         },
     },
     computed: {
+        token() {
+            const settings = chainStore.getChain(CURRENT_CONTEXT).settings as EVMChainSettings;
+            const token = settings.getSystemToken();
+            return token;
+        },
         truncatePrimaryValue(): boolean {
             const isMobile = this.$q.screen.lt.sm;
 
@@ -77,7 +82,7 @@ export default defineComponent({
         },
         prettySecondaryAmount(): string {
             const noSecondaryAmount = typeof this.secondaryAmount === 'string' && !this.secondaryAmount;
-            if (noSecondaryAmount || !this.tokenHasFiatValue) {
+            if (noSecondaryAmount) {
                 return '';
             }
 
@@ -91,6 +96,12 @@ export default defineComponent({
         },
     },
     methods: {
+        formatTooltipBalance(amount: number, isFiat: boolean): string {
+            const decimals = isFiat ? 2 : 4;
+            const symbol = isFiat ? fiatCurrency : this.token.symbol;
+
+            return `${prettyPrintCurrency(amount, decimals, fiatLocale)} ${symbol}`;
+        },
     },
 });
 </script>
@@ -114,7 +125,6 @@ export default defineComponent({
             </div>
             <div>
                 <span class="o-text--small q-mr-md">{{ withdrawalDate }}</span>
-                <ExternalLink :text="externalHash" :url="externalUrl" :purpose="externalPurpose" />
             </div>
         </div>
     </div>
@@ -137,45 +147,6 @@ export default defineComponent({
                 </template>
             </span>
         </div>
-
-        <q-btn
-            flat
-            dense
-            no-icon-animation
-            icon="more_vert"
-            class="c-stake-withdrawal-row__overflow"
-            :aria-label="$t('evm_wallet.balance_row_actions_aria')"
-        >
-            <q-menu anchor="bottom end" self="top right" :offset="[0, 16]">
-                <ul class="c-stake-withdrawal-row__overflow-ul">
-                    <li
-                        v-for="(item, index) in overflowMenuItems"
-                        :key="`overflow-item-${index}`"
-                        v-close-popup
-                        class="c-stake-withdrawal-row__overflow-li"
-                        tabindex="0"
-                        :aria-labelledby="`overflow-text-${index}`"
-                        @click="item.url ? goToLink(item.url) : promptAddToMetamask()"
-                        @keydown.enter.space="item.url ? goToLink(item.url) : promptAddToMetamask()"
-                    >
-                        <div class="c-stake-withdrawal-row__overflow-icon-wrapper">
-                            <InlineSvg
-                                :src="item.icon"
-                                :class="{
-                                    'c-stake-withdrawal-row__overflow-icon': true,
-                                    'c-stake-withdrawal-row__overflow-icon--stroke': item.strokeIcon,
-                                }"
-                                aria-hidden="true"
-                            />
-                        </div>
-
-                        <span :id="`overflow-text-${index}`" class="c-stake-withdrawal-row__overflow-text">
-                            {{ item.label }}
-                        </span>
-                    </li>
-                </ul>
-            </q-menu>
-        </q-btn>
     </div>
 </div>
 </template>
@@ -217,6 +188,39 @@ export default defineComponent({
         display: flex;
         flex-direction: column;
     }
+
+    &__balance-container {
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 8px;
+
+        flex-direction: column;
+        flex-shrink: 1;
+        text-align: right;
+        min-width: 0;
+    }
+
+    &__primary-amount,
+    &__secondary-amount {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    &__primary-amount {
+        @include text--header-4;
+        color: var(--text-high-contrast);
+        display: flex;
+        align-items: center;
+        flex: 1 1 max-content;
+        text-align: right;
+    }
+
+    &__secondary-amount {
+        @include text--small;
+        color: var(--text-default-contrast);
+    }
 }
 
 

From a59e24eb45b0dc015d5ea527747bb3c8ea3d3f74 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 11 Sep 2023 23:21:07 -0300
Subject: [PATCH 220/268] fixing the unstaking sidebar title

---
 src/i18n/en-us/index.js                | 1 +
 src/pages/evm/staking/UnstakingTab.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 69da4f39e..b13d5c7fc 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -232,6 +232,7 @@ export default {
         unstake_input_label: 'Unstaking Amount',
         unstake_output_label: 'Unstaked Amount',
         unstake: 'Unstake',
+        unstake_sidebar_title: 'Unstaking {symbol}?',
         unstake_button_label: 'Unstake {stakedSymbol} to {systemSymbol}',
         unstake_sidebar_content_fragment_1: 'Unstaked TLOS will',
         unstake_sidebar_content_fragment_2_bold: ' remain locked for a period of 10 days, ',
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index 91feffd3f..e076469a4 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -62,7 +62,7 @@ const stakedTokenBalanceInfo = computed(() => balanceStore.currentBalances.filte
 );
 const stakedTokenBalance = computed(() => stakedTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
 const sidebarContent = computed(() => {
-    const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
+    const header = $t('evm_stake.unstake_sidebar_title', { symbol: systemTokenSymbol });
     const content = [{
         text: $t(
             'evm_stake.unstake_sidebar_content_fragment_1',

From a427dce7b50163a553b49a09aab1bd079fa2a12b Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 12 Sep 2023 01:33:02 -0300
Subject: [PATCH 221/268] saving WIP - withdrawals with price

---
 src/antelope/stores/rex.ts            |  2 ++
 src/pages/evm/staking/WithdrawRaw.vue | 33 ++++++++++++++++++++++-----
 src/pages/evm/staking/WithdrawTab.vue |  3 ++-
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 5fca310b0..108e71f1a 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -50,6 +50,8 @@ export const useRexStore = defineStore(store_name, {
     state: (): RexState => (rexInitialState),
     getters: {
         getRexData: state => (label: string) => state.__rexData[label] ?? null,
+        getEvmRexData: state => (label: string) => state.__rexData[label] as EvmRexModel,
+        getNativeRexData: state => (label: string) => state.__rexData[label] as NativeRexModel,
     },
     actions: {
         trace: createTraceFunction(store_name),
diff --git a/src/pages/evm/staking/WithdrawRaw.vue b/src/pages/evm/staking/WithdrawRaw.vue
index dab796523..a1ca785be 100644
--- a/src/pages/evm/staking/WithdrawRaw.vue
+++ b/src/pages/evm/staking/WithdrawRaw.vue
@@ -8,8 +8,11 @@ import { CURRENT_CONTEXT, useChainStore, useEVMStore, useUserStore } from 'src/a
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { EvmRexDeposit } from 'src/antelope/types';
 import ToolTip from 'components/ToolTip.vue';
+import TimeStamp from 'components/TimeStamp.vue';
 import { prettyPrintCurrency, promptAddToMetamask } from 'src/antelope/stores/utils/currency-utils';
 import ExternalLink from 'components/ExternalLink.vue';
+import { ethers } from 'ethers';
+import { getLongDate } from 'src/antelope/stores/utils';
 
 const evmStore = useEVMStore();
 const userStore = useUserStore();
@@ -20,6 +23,8 @@ export default defineComponent({
     name: 'WalletBalanceRow',
     components: {
         InlineSvg,
+        ToolTip,
+        // TimeStamp, // TODO: fix this
     },
     data() {
         return {
@@ -39,11 +44,23 @@ export default defineComponent({
         },
     },
     computed: {
+        epoch() {
+            return this.withdrawal.until.toNumber();
+        },
+        longDate(): string {
+            return getLongDate(this.epoch);
+        },
+        isWithdrawable(): boolean {
+            return this.epoch <= Date.now() / 1000;
+        },
         token() {
             const settings = chainStore.getChain(CURRENT_CONTEXT).settings as EVMChainSettings;
             const token = settings.getSystemToken();
             return token;
         },
+        tokenBalanceFiat(): number | null {
+            return this.token.price.isAvailable ? +this.token.price.getAmountInFiatStr(this.withdrawal.amount) : null;
+        },
         truncatePrimaryValue(): boolean {
             const isMobile = this.$q.screen.lt.sm;
 
@@ -63,9 +80,7 @@ export default defineComponent({
             }
         },
         primaryAmount(): number | string {
-            // the top value is fiat if there is a fiat value for the token
-            // the top (only) value is the token balance iff token has no reliable fiat value.
-            return '100';
+            return this.tokenBalanceFiat as number;
         },
         prettyPrimaryAmount(): string {
             return prettyPrintCurrency(
@@ -78,7 +93,10 @@ export default defineComponent({
             );
         },
         secondaryAmount(): number | string {
-            return '300';
+            let amount = '0';
+            const amountBn = this.withdrawal.amount;
+            amount = ethers.utils.formatUnits(amountBn, this.token.decimals);
+            return amount;
         },
         prettySecondaryAmount(): string {
             const noSecondaryAmount = typeof this.secondaryAmount === 'string' && !this.secondaryAmount;
@@ -111,7 +129,7 @@ export default defineComponent({
     <div class="c-stake-withdrawal-row__left-container">
         <div class="c-stake-withdrawal-row__left-icon">
             <InlineSvg
-                :src="require('src/assets/icon--calendar-clock.svg')"
+                :src="require(`src/assets/icon--calendar-${isWithdrawable?'check':'clock'}.svg`)"
                 :alt="$t(iconAlt)"
                 class="c-stake-withdrawal-row__icon"
                 height="24"
@@ -124,7 +142,10 @@ export default defineComponent({
                 <span class="c-stake-withdrawal-row__withdrawal-status">{{ withdrawalStatus }}</span>
             </div>
             <div>
-                <span class="o-text--small q-mr-md">{{ withdrawalDate }}</span>
+                <span class="o-text--small q-mr-md">Withdraw it on Feb 12, 2023 09:32 AM</span>
+                <!--ToolTip :text="longDate" :hide-icon="true">
+                    <TimeStamp :timestamp="epoch" />
+                </ToolTip-->
             </div>
         </div>
     </div>
diff --git a/src/pages/evm/staking/WithdrawTab.vue b/src/pages/evm/staking/WithdrawTab.vue
index a1fba0786..028b6d014 100644
--- a/src/pages/evm/staking/WithdrawTab.vue
+++ b/src/pages/evm/staking/WithdrawTab.vue
@@ -29,6 +29,7 @@ const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
 const userStore = useUserStore();
 const balanceStore = useBalancesStore();
 const accountStore = useAccountStore();
+const rexStore = useRexStore();
 
 const systemToken = chainSettings.getSystemToken();
 const systemTokenSymbol = systemToken.symbol;
@@ -38,7 +39,7 @@ const stakedTokenSymbol = stakedToken.symbol;
 const stakedTokenDecimals = stakedToken.decimals;
 
 const loading = ref(false);
-const allWithdrawals = ref([{} as any]);
+const allWithdrawals = computed(() => rexStore.getEvmRexData(CURRENT_CONTEXT)?.deposits ?? []);
 const withdrawEnabled = ref(false);
 
 const withdraw = () => {

From f28737b4a85164c566f8ce75050ef008be0f0cae Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 12 Sep 2023 01:37:40 -0300
Subject: [PATCH 222/268] fixing the amount TLOS sent to unstake

---
 src/pages/evm/staking/UnstakingTab.vue | 35 +++++++-------------------
 1 file changed, 9 insertions(+), 26 deletions(-)

diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index e076469a4..8bcdffd26 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ethers } from 'ethers';
 
@@ -17,7 +17,7 @@ import EVMSidebarPage from 'src/layouts/EVMSidebarPage.vue';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
 import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
-import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { formatWei } from 'src/antelope/stores/utils';
 
 const label = 'current';
 
@@ -41,7 +41,6 @@ const stakedTokenDecimals = stakedToken.decimals;
 // data
 const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
 const inputModelValue = ref(ethers.constants.Zero);
-const estimatedGas = ref(ethers.constants.Zero);
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const outputModelValue = computed(() => {
     if (unstakedRatio.value.isZero()) {
@@ -62,7 +61,7 @@ const stakedTokenBalanceInfo = computed(() => balanceStore.currentBalances.filte
 );
 const stakedTokenBalance = computed(() => stakedTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
 const sidebarContent = computed(() => {
-    const header = $t('evm_stake.unstake_sidebar_title', { symbol: systemTokenSymbol });
+    const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
     const content = [{
         text: $t(
             'evm_stake.unstake_sidebar_content_fragment_1',
@@ -83,30 +82,13 @@ const sidebarContent = computed(() => {
         content,
     };
 });
-const availableToUnstake = computed(() => {
-    const available = stakedTokenBalance.value.sub(estimatedGas.value);
-
-    if (available.lt(0)) {
-        return ethers.constants.Zero;
-    }
-    return available;
-});
+const availableToUnstake = computed(() => stakedTokenBalance.value);
 const formIsValid = computed(() =>
     !outputModelValue.value.isZero() &&
     inputModelValue.value.lt(availableToUnstake.value),
 );
 const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('unstakeEVMSystemTokens'));
 
-
-// methods
-onBeforeMount(() => {
-    // https://github.com/telosnetwork/telos-wallet/issues/274
-    const GAS_FOR_stakePING_TOKEN = 55500;
-    chainSettings.getEstimatedGas(GAS_FOR_stakePING_TOKEN).then((gas) => {
-        estimatedGas.value = gas.system;
-    });
-});
-
 async function handleCtaClick() {
     const label = CURRENT_CONTEXT;
     if (!await accountStore.isConnectedToCorrectNetwork(label)) {
@@ -122,11 +104,12 @@ async function handleCtaClick() {
 
     if (formIsValid.value) {
         try {
-            const tx = await useRexStore().unstakeEVMSystemTokens(label, inputModelValue.value);
-            const formattedAmount = formatWei(inputModelValue.value, stakedTokenDecimals, WEI_PRECISION);
+            const displayDecimals = 4;
+            const tx = await useRexStore().unstakeEVMSystemTokens(label, outputModelValue.value);
+            const formattedAmount = formatWei(outputModelValue.value, systemTokenDecimals, displayDecimals);
 
             const dismiss = ant.config.notifyNeutralMessageHandler(
-                $t('notification.neutral_message_unstaking', { quantity: formattedAmount, symbol: stakedTokenSymbol }),
+                $t('notification.neutral_message_unstaking', { quantity: formattedAmount, symbol: systemTokenSymbol }),
             );
 
             tx.wait().then(() => {
@@ -163,7 +146,7 @@ async function handleCtaClick() {
         </div>
     </div>
 
-    <!-- TLOS input -->
+    <!-- STLOS input -->
     <div class="row q-mb-lg">
         <div class="col-12">
             <CurrencyInput

From 4279e85081303305b7ff4b9fe7b7e4113996078d Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Tue, 12 Sep 2023 11:52:18 -0400
Subject: [PATCH 223/268] fix incorrect NFT displayed if ID is the same

---
 src/pages/evm/nfts/NftInventoryPage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/evm/nfts/NftInventoryPage.vue b/src/pages/evm/nfts/NftInventoryPage.vue
index 4ab7ba291..475e60846 100644
--- a/src/pages/evm/nfts/NftInventoryPage.vue
+++ b/src/pages/evm/nfts/NftInventoryPage.vue
@@ -284,9 +284,9 @@ function goToDetailPage({ collectionAddress, id }: Record<string, string>) {
     });
 }
 
-function getNftForViewer(row: { id: string }) {
+function getNftForViewer(row: { id: string, collectionAddress: string }) {
     // nft definitely exists as it comes from the list of NFTs, hence 'as NFTClass' for NftViewer prop typing
-    return nftsToShow.value.find(nft => nft.id === row.id) as NFTClass;
+    return nftsToShow.value.find(nft => nft.id === row.id && nft.contractAddress === row.collectionAddress) as NFTClass;
 }
 
 // we update the inventory while the user is on the page

From d0e3b5bf80bdbc7b0148fe46f48df15a0cf845e6 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Tue, 12 Sep 2023 12:00:34 -0400
Subject: [PATCH 224/268] fix aspect ratio for icon viewer

---
 src/pages/evm/nfts/NftViewer.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/evm/nfts/NftViewer.vue b/src/pages/evm/nfts/NftViewer.vue
index f4378bbb6..fbe9da6f8 100644
--- a/src/pages/evm/nfts/NftViewer.vue
+++ b/src/pages/evm/nfts/NftViewer.vue
@@ -302,6 +302,7 @@ function setHoverPreviewVisibility(visible: boolean) {
     <div
         v-else
         ref="iconElement"
+        class="c-nft-viewer__icon-container"
         @mouseenter="setHoverPreviewVisibility(true)"
         @mouseleave="setHoverPreviewVisibility(false)"
     >
@@ -440,8 +441,9 @@ function setHoverPreviewVisibility(visible: boolean) {
 
     &__list-image {
         border-radius: 4px;
-        height: $list-icon-size;
-        width: $list-icon-size;
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
     }
 
     &__overlay-icon-bg,
@@ -502,6 +504,11 @@ function setHoverPreviewVisibility(visible: boolean) {
         flex-shrink: 0;
     }
 
+    &__icon-container {
+        height: 100%;
+        width: 100%;
+    }
+
     &__hover-container {
         position: fixed;
         height: 278px;

From 198989b57f37e1f514b9a781cfea68f3eefe892f Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 12 Sep 2023 19:37:32 -0300
Subject: [PATCH 225/268] saving WIP - withdraw almost complete

---
 src/antelope/stores/rex.ts                    | 30 +++++++++-
 src/antelope/stores/utils/index.ts            | 14 +++++
 .../authenticators/EVMAuthenticator.ts        |  1 +
 .../authenticators/InjectedProviderAuth.ts    | 20 ++++++-
 .../wallets/authenticators/OreIdAuth.ts       |  5 ++
 .../authenticators/WalletConnectAuth.ts       |  5 ++
 src/i18n/en-us/index.js                       |  3 +
 src/pages/evm/staking/WithdrawRaw.vue         | 34 +++++++----
 src/pages/evm/staking/WithdrawTab.vue         | 59 +++++++++++++++----
 9 files changed, 146 insertions(+), 25 deletions(-)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 108e71f1a..da58deb1f 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -76,12 +76,12 @@ export const useRexStore = defineStore(store_name, {
         async getContractInstance(label: string, address: string) {
             const authenticator = useAccountStore().getEVMAuthenticator(label);
             if (!authenticator) {
-                this.trace('getStakedSystemContractInstance', label, '-> no authenticator');
+                this.trace('getContractInstance', label, '-> no authenticator');
                 throw new AntelopeError('antelope.chain.error_no_default_authenticator');
             }
             const contract = await useEVMStore().getContract(authenticator, address);
             if (!contract) {
-                this.trace('getStakedSystemContractInstance', label, '-> no contract');
+                this.trace('getContractInstance', label, '-> no contract');
                 throw new AntelopeError('antelope.rex.error_contract_not_found', { address });
             }
             const contractInstance = await contract.getContractInstance();
@@ -93,6 +93,7 @@ export const useRexStore = defineStore(store_name, {
          * @returns the contract instance
          */
         async getStakedSystemContractInstance(label: string) {
+            this.trace('getStakedSystemContractInstance', label);
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().address;
             return this.getContractInstance(label, address);
         },
@@ -102,6 +103,7 @@ export const useRexStore = defineStore(store_name, {
          * @returns the contract instance
          */
         async getEscrowContractInstance(label: string) {
+            this.trace('getEscrowContractInstance', label);
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getEscrowContractAddress();
             return this.getContractInstance(label, address);
         },
@@ -259,6 +261,30 @@ export const useRexStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading(funcname);
             }
         },
+        /**
+         * Performs the withdrawal of staked tokens for a given account on the REX system of a given network.
+         * @param label identifies the context (account-network) for the data
+         * @param amount the amount of tokens to withdraw
+         * @returns the transaction response holding the hash and a wait method to subscribe to the transaction receipt
+         */
+        async withdrawEVMSystemTokens(label: string, amount: ethers.BigNumber): Promise<TransactionResponse> {
+            const funcname = 'withdrawEVMSystemTokens';
+            this.trace(funcname, label, amount.toString());
+
+            try {
+                useFeedbackStore().setLoading(funcname);
+                const account = useAccountStore().getAccount(label);
+                const authenticator = useAccountStore().getEVMAuthenticator(label);
+                return await authenticator.withdrawStakedTokens()
+                    .then(r => this.subscribeForTransactionReceipt(account, r as TransactionResponse));
+            } catch (error) {
+                const trxError = getAntelope().config.wrapError('antelope.evm.error_wrap_failed', error);
+                getAntelope().config.transactionErrorHandler(trxError, funcname);
+                throw trxError;
+            } finally {
+                useFeedbackStore().unsetLoading(funcname);
+            }
+        },
         // commits ---------------
         setWithdrawable(label: string, withdrawable: ethers.BigNumber) {
             const num = parseFloat(ethers.utils.formatUnits(withdrawable, this.getStakingDecimals()));
diff --git a/src/antelope/stores/utils/index.ts b/src/antelope/stores/utils/index.ts
index 8d8463b4d..1b4c3d218 100644
--- a/src/antelope/stores/utils/index.ts
+++ b/src/antelope/stores/utils/index.ts
@@ -214,6 +214,20 @@ export function getLongDate(epoch: number): string {
     return `${format(fromUnixTime(epoch), 'MMM d, yyyy hh:mm:ss a')} (UTC ${offset})`;
 }
 
+
+/**
+ * TODO: write this doc
+ *
+ * @param epoch
+ *
+ * @return string
+ */
+export function getFormatedDate(epoch: number, timeFormat = 'MMM d, yyyy hh:mm:ss a', showUtc = false): string {
+    const offset = getFormattedUtcOffset(new Date(epoch));
+    const utc = showUtc ? ` (UTC ${offset})` : '';
+    return `${format(fromUnixTime(epoch), timeFormat)}${utc}`;
+}
+
 /*
 * Determines whether the amount is too large (more than six characters long) to be displayed in full on mobile devices
 *
diff --git a/src/antelope/wallets/authenticators/EVMAuthenticator.ts b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
index b80989335..98114f53f 100644
--- a/src/antelope/wallets/authenticators/EVMAuthenticator.ts
+++ b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
@@ -30,6 +30,7 @@ export abstract class EVMAuthenticator {
     abstract unwrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
     abstract stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
     abstract unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse | WriteContractResult>;
+    abstract withdrawStakedTokens(): Promise<EvmTransactionResponse | WriteContractResult>;
     abstract isConnectedTo(chainId: string): Promise<boolean>;
     abstract externalProvider(): Promise<ethers.providers.ExternalProvider>;
     abstract web3Provider(): Promise<ethers.providers.Web3Provider>;
diff --git a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
index 93d5e857c..f324160e3 100644
--- a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
+++ b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
@@ -2,7 +2,7 @@
 
 import { BigNumber, ethers } from 'ethers';
 import { BehaviorSubject, filter, map } from 'rxjs';
-import { useAccountStore, useChainStore, useEVMStore, useFeedbackStore } from 'src/antelope';
+import { useAccountStore, useChainStore, useEVMStore, useFeedbackStore, useRexStore } from 'src/antelope';
 import {
     AntelopeError,
     ERC20_TYPE,
@@ -250,6 +250,11 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
         });
     }
 
+    /**
+     * This method creates a Transaction to stake system tokens
+     * @param amount amount of system tokens to stake
+     * @returns transaction response with the hash and a wait() method to wait confirmation
+     */
     async stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
         this.trace('stakeSystemTokens', amount.toString());
 
@@ -267,6 +272,11 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
         }
     }
 
+    /**
+     * This method creates a Transaction to unstake system tokens
+     * @param amount amount of system tokens to unstake
+     * @returns transaction response with the hash and a wait() method to wait confirmation
+     */
     async unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
         this.trace('unstakeSystemTokens', amount.toString());
 
@@ -285,6 +295,14 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
         }
     }
 
+    /**
+     * This method creates a Transaction to withdraw all unblocked staked tokens
+     */
+    async withdrawStakedTokens() : Promise<EvmTransactionResponse> {
+        this.trace('withdrawStakedTokens');
+        const contractInstance = await useRexStore().getEscrowContractInstance(this.label);
+        return contractInstance.withdraw();
+    }
 
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index ff9050e1d..c7c1364f9 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -389,6 +389,11 @@ export class OreIdAuth extends EVMAuthenticator {
         return this.performOreIdTransaction(from, unstakeTransaction);
     }
 
+    async withdrawStakedTokens() : Promise<EvmTransactionResponse> {
+        this.trace('withdrawStakedTokens');
+        throw new AntelopeError('antelope.evm.error_not_implemented');
+    }
+
 
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
diff --git a/src/antelope/wallets/authenticators/WalletConnectAuth.ts b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
index 8a3e2281a..4dd3c422d 100644
--- a/src/antelope/wallets/authenticators/WalletConnectAuth.ts
+++ b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
@@ -392,6 +392,11 @@ export class WalletConnectAuth extends EVMAuthenticator {
         return await writeContract(sendConfig);
     }
 
+    async withdrawStakedTokens() : Promise<WriteContractResult> {
+        this.trace('withdrawStakedTokens');
+        throw new AntelopeError('antelope.evm.error_not_implemented');
+    }
+
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
 
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 1f5287ce6..acd3d0519 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -239,6 +239,9 @@ export default {
         unstake_sidebar_content_fragment_3: 'after which it can be withdrawn to your account from the Withdraw tab.',
         withdraw_button_disabled: 'Nothing to withdraw',
         withdraw_button_enabled: 'Withdraw {amount} {symbol}',
+        withdrawal_available: 'Available for withdrawal',
+        unstaking_pending_time: 'Unstaking for {time}',
+        withdrawal_date: 'Withdrawal it on {date}',
     },
     notification:{
         success_title_trx: 'Success',
diff --git a/src/pages/evm/staking/WithdrawRaw.vue b/src/pages/evm/staking/WithdrawRaw.vue
index a1ca785be..10942ba7e 100644
--- a/src/pages/evm/staking/WithdrawRaw.vue
+++ b/src/pages/evm/staking/WithdrawRaw.vue
@@ -8,11 +8,9 @@ import { CURRENT_CONTEXT, useChainStore, useEVMStore, useUserStore } from 'src/a
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { EvmRexDeposit } from 'src/antelope/types';
 import ToolTip from 'components/ToolTip.vue';
-import TimeStamp from 'components/TimeStamp.vue';
-import { prettyPrintCurrency, promptAddToMetamask } from 'src/antelope/stores/utils/currency-utils';
-import ExternalLink from 'components/ExternalLink.vue';
+import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { ethers } from 'ethers';
-import { getLongDate } from 'src/antelope/stores/utils';
+import { getFormatedDate } from 'src/antelope/stores/utils';
 
 const evmStore = useEVMStore();
 const userStore = useUserStore();
@@ -24,7 +22,6 @@ export default defineComponent({
     components: {
         InlineSvg,
         ToolTip,
-        // TimeStamp, // TODO: fix this
     },
     data() {
         return {
@@ -48,7 +45,21 @@ export default defineComponent({
             return this.withdrawal.until.toNumber();
         },
         longDate(): string {
-            return getLongDate(this.epoch);
+            return getFormatedDate(this.epoch, 'MMM d, yyyy hh:mm a', false);
+        },
+        pendingTime(): string {
+            const seconds = this.epoch - Date.now() / 1000;
+            const days = Math.floor(seconds / 86400);
+            const hours = Math.floor((seconds % 86400) / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            const secondsLeft = Math.floor(seconds % 60);
+
+            const daysStr = days > 0 ? `${days} days ` : '';
+            const hoursStr = hours > 0 ? `${hours} hours ` : '';
+            const minutesStr = (!days && minutes > 0) ? `${minutes} minutes ` : '';
+            const secondsStr = (!days && !hours && secondsLeft > 0) ? `${secondsLeft} seconds ` : '';
+
+            return `${daysStr}${hoursStr}${minutesStr}${secondsStr}`;
         },
         isWithdrawable(): boolean {
             return this.epoch <= Date.now() / 1000;
@@ -139,13 +150,14 @@ export default defineComponent({
         </div>
         <div class="c-stake-withdrawal-row__left-content">
             <div>
-                <span class="c-stake-withdrawal-row__withdrawal-status">{{ withdrawalStatus }}</span>
+                <span class="c-stake-withdrawal-row__withdrawal-status">
+                    {{ isWithdrawable ? $t('evm_stake.withdrawal_available') : $t('evm_stake.unstaking_pending_time', { time: pendingTime }) }}
+                </span>
             </div>
             <div>
-                <span class="o-text--small q-mr-md">Withdraw it on Feb 12, 2023 09:32 AM</span>
-                <!--ToolTip :text="longDate" :hide-icon="true">
-                    <TimeStamp :timestamp="epoch" />
-                </ToolTip-->
+                <span class="o-text--small q-mr-md">
+                    {{ isWithdrawable ? longDate : $t('evm_stake.withdrawal_date', { date: longDate }) }}
+                </span>
             </div>
         </div>
     </div>
diff --git a/src/pages/evm/staking/WithdrawTab.vue b/src/pages/evm/staking/WithdrawTab.vue
index 028b6d014..6af0a3a81 100644
--- a/src/pages/evm/staking/WithdrawTab.vue
+++ b/src/pages/evm/staking/WithdrawTab.vue
@@ -9,17 +9,15 @@ import {
     useAccountStore,
     useBalancesStore,
     useChainStore,
+    useFeedbackStore,
     useRexStore,
     useUserStore,
 } from 'src/antelope';
 
 import WithdrawRaw from 'src/pages/evm/staking/WithdrawRaw.vue';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
-import ConversionRateBadge from 'src/components/ConversionRateBadge.vue';
-import CurrencyInput from 'src/components/evm/inputs/CurrencyInput.vue';
-import { WEI_PRECISION, formatWei } from 'src/antelope/stores/utils';
+import { formatWei } from 'src/antelope/stores/utils';
 
-const label = 'current';
 
 const { t: $t } = useI18n();
 const uiDecimals = 2;
@@ -30,6 +28,7 @@ const userStore = useUserStore();
 const balanceStore = useBalancesStore();
 const accountStore = useAccountStore();
 const rexStore = useRexStore();
+const feed = useFeedbackStore();
 
 const systemToken = chainSettings.getSystemToken();
 const systemTokenSymbol = systemToken.symbol;
@@ -38,15 +37,52 @@ const stakedToken = chainSettings.getStakedSystemToken();
 const stakedTokenSymbol = stakedToken.symbol;
 const stakedTokenDecimals = stakedToken.decimals;
 
-const loading = ref(false);
+const loading = computed(() => feed.isLoading('withdrawEVMSystemTokens'));
 const allWithdrawals = computed(() => rexStore.getEvmRexData(CURRENT_CONTEXT)?.deposits ?? []);
-const withdrawEnabled = ref(false);
 
-const withdraw = () => {
-    if (!withdrawEnabled.value) {
+// prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol)
+const withdrawableBalanceBn = computed(() => useRexStore().getRexData(CURRENT_CONTEXT)?.withdrawable ?? ethers.constants.Zero);
+
+// enable only if withdrawableBalanceBn > 0
+const withdrawEnabled = computed(() => withdrawableBalanceBn.value?.gt(0) ?? false);
+
+// hadle withdraw button click
+const handleWithdrawClick = async () => {
+    if (!withdrawEnabled.value || loading.value) {
+        return;
+    }
+    const label = CURRENT_CONTEXT;
+    if (!accountStore.isConnectedToCorrectNetwork(label)) {
+        const networkName = chainStore.loggedChain.settings.getDisplay();
+        const errorMessage = ant.config.localizationHandler('evm_wallet.incorrect_network', { networkName });
+
+        ant.config.notifyFailureWithAction(errorMessage, {
+            label: ant.config.localizationHandler('evm_wallet.switch'),
+        });
+
         return;
     }
-    console.log('you pressed withdraw');
+
+    try {
+        const tx = await useRexStore().withdrawEVMSystemTokens(CURRENT_CONTEXT, withdrawableBalanceBn.value);
+        const formattedAmount = formatWei(withdrawableBalanceBn.value, systemTokenDecimals, 4);
+
+        const dismiss = ant.config.notifyNeutralMessageHandler(
+            $t('notification.neutral_message_withdrawing', { quantity: formattedAmount, symbol: systemTokenSymbol }),
+        );
+
+        tx.wait().then(() => {
+            ant.config.notifySuccessfulTrxHandler(
+                `${chainSettings.getExplorerUrl()}/tx/${tx.hash}`,
+            );
+        }).catch((err) => {
+            console.error(err);
+        }).finally(() => {
+            dismiss();
+        });
+    } catch (err) {
+        console.error(err);
+    }
 };
 
 
@@ -57,12 +93,13 @@ const withdraw = () => {
     <div class="c-withdraw-tab__withdraw-btn">
         <q-btn
             :label="$t(withdrawEnabled ? 'evm_stake.withdraw_button_enabled' : 'evm_stake.withdraw_button_disabled', {
-                amount: formatWei(1000000000000000, systemTokenDecimals, uiDecimals),
+                amount: formatWei(withdrawableBalanceBn, systemTokenDecimals, uiDecimals),
                 symbol: systemTokenSymbol
             })"
             :disable="!withdrawEnabled"
+            :loading="loading"
             color="primary"
-            @click="withdraw"
+            @click="handleWithdrawClick"
         />
     </div>
 

From 1fe7baccad14faf03910c756b59fc2e24b722d81 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Wed, 13 Sep 2023 18:25:49 -0400
Subject: [PATCH 226/268] fix redundant price fetching

---
 src/antelope/stores/history.ts                |  26 ++--
 src/antelope/stores/tokens.ts                 | 131 +++++++++++++++++-
 src/antelope/stores/utils/date-utils.ts       |   4 +
 src/api/price.ts                              |  48 +++++--
 src/i18n/en-us/index.js                       |   1 +
 .../antelope/stores/utils/date-utils.spec.ts  |   4 +
 6 files changed, 189 insertions(+), 25 deletions(-)

diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 69e0fe328..51764d62c 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -37,12 +37,18 @@ import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { useChainStore } from 'src/antelope/stores/chain';
 import { toRaw } from 'vue';
 import { BigNumber } from 'ethers';
-import { CURRENT_CONTEXT, getAntelope, useContractStore, useNftsStore, useUserStore } from '..';
+import {
+    CURRENT_CONTEXT,
+    getAntelope,
+    useContractStore,
+    useNftsStore,
+    useTokensStore,
+    useUserStore,
+} from '..';
 import { formatUnits } from 'ethers/lib/utils';
 import { getGasInTlos, WEI_PRECISION } from 'src/antelope/stores/utils';
 import { convertCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { dateIsWithinXMinutes } from 'src/antelope/stores/utils/date-utils';
-import { getFiatPriceFromIndexer } from 'src/api/price';
 
 export const transfers_filter_limit = 10000;
 
@@ -245,7 +251,6 @@ export const useHistoryStore = defineStore(store_name, {
             const chain = useChainStore().getChain(label);
             const nftStore = useNftsStore();
             const chain_settings = chain.settings as EVMChainSettings;
-            const indexer = chain_settings.getIndexer();
             const contractStore = useContractStore();
             const chainSettings = (chain.settings as EVMChainSettings);
             const tlosInUsd = await chainSettings.getUsdPrice();
@@ -364,16 +369,17 @@ export const useHistoryStore = defineStore(store_name, {
                             let transferAmountInFiat: number | undefined;
 
                             if (tokenXfer.symbol) {
-                                const tokenFiatPrice = await getFiatPriceFromIndexer(
-                                    tokenXfer.symbol,
-                                    tokenXfer.address,
+                                const tokenFiatPriceData = await useTokensStore().fetchTokenPriceData(
                                     userStore.fiatCurrency,
-                                    indexer,
-                                    chain_settings,
+                                    tokenXfer.address,
+                                    tokenXfer.symbol,
+                                    chain_settings.getNetwork(),
                                 );
 
-                                transferAmountInFiat = tokenFiatPrice ?
-                                    tokenFiatPrice * +formatUnits(tokenXfer.value, tokenXfer.decimals) :
+                                const tokenFiatPriceStr = tokenFiatPriceData?.str;
+
+                                transferAmountInFiat = tokenFiatPriceStr ?
+                                    +tokenFiatPriceStr * +formatUnits(tokenXfer.value, tokenXfer.decimals) :
                                     undefined;
                             }
 
diff --git a/src/antelope/stores/tokens.ts b/src/antelope/stores/tokens.ts
index 2a0443a1b..fcd743ee5 100644
--- a/src/antelope/stores/tokens.ts
+++ b/src/antelope/stores/tokens.ts
@@ -4,7 +4,10 @@
 
 import { defineStore } from 'pinia';
 import {
-    Label, TokenClass,
+    AntelopeError,
+    Label,
+    TokenClass,
+    TokenPrice,
 } from 'src/antelope/types';
 import { getAntelope, useFeedbackStore, useChainStore, CURRENT_CONTEXT } from 'src/antelope';
 import { toRaw } from 'vue';
@@ -12,9 +15,27 @@ import { errorToString } from 'src/antelope/config';
 import { filter } from 'rxjs';
 import { createTraceFunction, isTracingAll } from 'src/antelope/stores/feedback';
 import { ChainModel } from 'src/antelope/stores/chain';
+import { dateIsWithinXMinutes } from 'src/antelope/stores/utils/date-utils';
+import { getTokenPriceDataFromIndexer } from 'src/api/price';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 
 export interface TokensState {
     __tokens:  { [label: Label]: TokenClass[] };
+    __prices: {
+        [network: string]: { // e.g. 'telos'
+            [fiatCode: string]: { // e.g. USD
+                [tokenAddress: string]: {
+                    priceData: TokenPrice | null;
+                    lastFetchTime?: number; // ms from epoch
+                    // used to prevent redundant network calls for price data; because transaction rows
+                    // are processed in parallel, there may be many calls to get the price of a particular
+                    // token in quick succession,
+                    // e.g. if there are 100 transactions displayed, and each one contains a transfer of WTLOS
+                    promiseCache?: Promise<TokenPrice | null> | null;
+                };
+            },
+        },
+    },
 }
 
 const store_name = 'tokens';
@@ -53,9 +74,117 @@ export const useTokensStore = defineStore(store_name, {
                 useFeedbackStore().unsetLoading('updateTokensForNetwork');
             }
         },
+        async fetchTokenPriceData(fiatCode: string, tokenAddress: string, tokenSymbol: string, network: string): Promise<TokenPrice | null> {
+            this.trace('fetchTokenPriceData', fiatCode, tokenAddress, network);
+
+            const tokenAddressLower = tokenAddress.toLowerCase();
+            const feedbackStore = useFeedbackStore();
+
+            feedbackStore.setLoading('fetchTokenPriceData');
+
+            const cachedPriceData = this.__prices[network]?.[fiatCode]?.[tokenAddressLower];
+
+            const indexerPriceUpdated = cachedPriceData?.priceData?.market?.info.updated;
+            const indexerPriceUpdatedIsWithin10Minutes = Boolean(indexerPriceUpdated && dateIsWithinXMinutes(+indexerPriceUpdated, 10));
+            const lastFetched = cachedPriceData?.lastFetchTime;
+            const lastFetchIsWithin10Minutes = Boolean(lastFetched && dateIsWithinXMinutes(lastFetched, 10));
+
+            // if we have fetched this marketData within the last 10 minutes, and that data is not stale, return the cached data
+            if (cachedPriceData?.priceData?.market && indexerPriceUpdatedIsWithin10Minutes && lastFetchIsWithin10Minutes) {
+                feedbackStore.unsetLoading('fetchTokenPriceData');
+                return cachedPriceData.priceData;
+            } else if (cachedPriceData && lastFetchIsWithin10Minutes) {
+                console.log(tokenAddressLower);
+
+                // we fetched the price data recently but it was stale or incomplete at that time; do not refetch
+                feedbackStore.unsetLoading('fetchTokenPriceData');
+                return null;
+            }
+
+            if (!this.__prices[network]?.[fiatCode]?.[tokenAddressLower]?.promiseCache) {
+                const getPriceData = async () => {
+                    try {
+                        const chainSettings = (useChainStore().getChain(CURRENT_CONTEXT).settings as EVMChainSettings);
+
+                        const priceData = await getTokenPriceDataFromIndexer(
+                            tokenSymbol,
+                            tokenAddress,
+                            fiatCode,
+                            chainSettings.getIndexer(),
+                            chainSettings,
+                        );
+
+                        this.setPriceForToken(fiatCode, tokenAddressLower, network, priceData);
+
+                        return priceData;
+                    } catch (e) {
+                        throw new AntelopeError('antelope.evm.error_fetching_token_price');
+                    } finally {
+                        // clear the promise cache once data has been loaded
+                        this.setPromiseCacheForToken(
+                            fiatCode,
+                            tokenAddressLower,
+                            network,
+                            null,
+                        );
+                        feedbackStore.unsetLoading('fetchTokenPriceData');
+                    }
+                };
+                this.setPromiseCacheForToken(
+                    fiatCode,
+                    tokenAddressLower,
+                    network,
+                    getPriceData(),
+                );
+            }
+
+            return this.__prices[network]?.[fiatCode]?.[tokenAddressLower]?.promiseCache ?? null;
+        },
+
+        // commits
+        setPriceForToken(fiatCode: string, tokenAddress: string, network: string, priceData: TokenPrice | null) {
+            this.trace('setPriceForToken', fiatCode, tokenAddress, network, priceData);
+            if (!this.__prices[network]) {
+                this.__prices[network] = {};
+            }
+
+            if (!this.__prices[network][fiatCode]) {
+                this.__prices[network][fiatCode] = {};
+            }
+
+            this.__prices[network][fiatCode][tokenAddress] = {
+                priceData,
+                lastFetchTime: Date.now(),
+                promiseCache: null,
+            };
+        },
+        setPromiseCacheForToken(
+            fiatCode: string,
+            tokenAddress: string,
+            network: string,
+            promise: Promise<TokenPrice | null> | null,
+        ) {
+            this.trace('setPromiseCacheForToken', fiatCode, tokenAddress, network, promise);
+            if (!this.__prices[network]) {
+                this.__prices[network] = {};
+            }
+
+            if (!this.__prices[network][fiatCode]) {
+                this.__prices[network][fiatCode] = {};
+            }
+
+            if (!this.__prices[network][fiatCode][tokenAddress]) {
+                this.__prices[network][fiatCode][tokenAddress] = {
+                    priceData: null,
+                };
+            }
+
+            this.__prices[network][fiatCode][tokenAddress].promiseCache = promise;
+        },
     },
 });
 
 const tokensInitialState: TokensState = {
     __tokens: {},
+    __prices: {},
 };
diff --git a/src/antelope/stores/utils/date-utils.ts b/src/antelope/stores/utils/date-utils.ts
index d4c809a17..0841f31b1 100644
--- a/src/antelope/stores/utils/date-utils.ts
+++ b/src/antelope/stores/utils/date-utils.ts
@@ -3,6 +3,10 @@ export function dateIsWithinXMinutes(epochMs: number, minutes: number) {
         throw new Error('epochMs must be greater than 0');
     }
 
+    if (epochMs % 1 !== 0) {
+        throw new Error('epochMs must be an integer');
+    }
+
     // make a date object which represents the time X minutes ago
     const xMinsAgo = new Date();
     xMinsAgo.setMinutes(xMinsAgo.getMinutes() - minutes);
diff --git a/src/api/price.ts b/src/api/price.ts
index ce887ce63..48843f784 100644
--- a/src/api/price.ts
+++ b/src/api/price.ts
@@ -1,11 +1,15 @@
 import axios, { AxiosInstance } from 'axios';
 import {
+    MarketSourceInfo,
     NativeCurrencyAddress,
     PriceChartData,
     PriceHistory,
     PriceStats,
+    TokenMarketData,
+    TokenPrice,
 } from 'src/antelope/types';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { dateIsWithinXMinutes } from 'src/antelope/stores/utils/date-utils';
 
 interface CachedPrice {
     lastFetchTime: number | null,
@@ -47,6 +51,7 @@ export const getCoingeckoUsdPrice = async (
     }
 };
 
+// fetch the fiat price for a token as a number
 export async function getFiatPriceFromIndexer(
     tokenSymbol: string,
     tokenAddress: string,
@@ -54,30 +59,45 @@ export async function getFiatPriceFromIndexer(
     indexerAxios: AxiosInstance,
     chain_settings: EVMChainSettings,
 ): Promise<number> {
+    const price = await getTokenPriceDataFromIndexer(tokenSymbol, tokenAddress, fiatCode, indexerAxios, chain_settings);
+
+    if (price) {
+        return +price.str;
+    }
+
+    return 0;
+}
+
+// fetch the price data for a particular token from the indexer
+export async function getTokenPriceDataFromIndexer(
+    tokenSymbol: string,
+    tokenAddress: string,
+    fiatCode: string,
+    indexerAxios: AxiosInstance,
+    chain_settings: EVMChainSettings,
+): Promise<TokenPrice | null> {
     const wrappedSystemAddress = chain_settings.getWrappedSystemToken().address;
     const actualTokenAddress = tokenAddress === NativeCurrencyAddress ? wrappedSystemAddress : tokenAddress;
-    const response = (await indexerAxios.get(`/v1/tokens/marketdata?tokens=${tokenSymbol}&vs=${fiatCode}`)).data;
+    const response = (await indexerAxios.get(`/v1/tokens/marketdata?tokens=${tokenSymbol}&vs=${fiatCode}`)).data as { results: MarketSourceInfo [] };
 
-    const tokenMarketData = response.results.find(
-        (tokenData: Record<string, string>) => tokenData.address.toLowerCase() === actualTokenAddress.toLowerCase(),
+    const tokenMarketDataSource = response.results.find(
+        tokenData => (tokenData.address ?? '').toLowerCase() === actualTokenAddress.toLowerCase(),
     );
 
-    if (!tokenMarketData?.updated || !tokenMarketData.price) {
-        return 0;
+    if (!tokenMarketDataSource?.updated || !tokenMarketDataSource.price) {
+        return null;
     }
 
-    const lastPriceUpdated = (new Date(+tokenMarketData.updated)).getTime();
-    const now = (new Date()).getTime();
-
-    const diffInMilliseconds = Math.abs(lastPriceUpdated - now);
-    const diffInMinutes = diffInMilliseconds / (1000 * 60);
+    const lastPriceUpdated = (new Date(+tokenMarketDataSource.updated)).getTime();
 
     // only use indexer data if it is no more than 10 minutes old
-    if (diffInMinutes < 10) {
-        return tokenMarketData.price;
+    if (dateIsWithinXMinutes(lastPriceUpdated, 10)) {
+
+        const marketData = new TokenMarketData(tokenMarketDataSource);
+        return new TokenPrice(marketData);
     }
-    // if indexer data is stale use coingecko data
-    return 0;
+    // if indexer data is stale, return no data
+    return null;
 }
 
 export const getCoingeckoPriceChartData = async (
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 6a5013586..a726d98e8 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -480,6 +480,7 @@ export default {
             error_unwrap_not_supported_on_native: 'Unwrap is not supported on native chain',
             error_wrap_failed: 'An unknown error occurred when wrapping tokens',
             error_unwrap_failed: 'An unknown error occurred when unwrapping tokens',
+            error_fetching_token_price: 'An unknown error occurred when fetching token price data',
         },
         history: {
             error_fetching_transactions: 'Unexpected error fetching transactions. Please refresh the page to try again.',
diff --git a/test/jest/__tests__/antelope/stores/utils/date-utils.spec.ts b/test/jest/__tests__/antelope/stores/utils/date-utils.spec.ts
index 6c518aa05..4cb984872 100644
--- a/test/jest/__tests__/antelope/stores/utils/date-utils.spec.ts
+++ b/test/jest/__tests__/antelope/stores/utils/date-utils.spec.ts
@@ -6,6 +6,10 @@ describe('dateIsWithinXMinutes', () => {
         expect(() => dateIsWithinXMinutes(-1, 1)).toThrow();
     });
 
+    it('should throw an error if epochMs is not an integer', () => {
+        expect(() => dateIsWithinXMinutes(0.5, 1)).toThrow();
+    });
+
     it('should return true if the date is within the defined timeframe', () => {
         const now = Date.now();
         const fiveMinutesAgo = now - 1000 * 60 * 5;

From f5f0fac50d7a66ffac17d4ded2e5ff196113c235 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Wed, 13 Sep 2023 18:26:28 -0400
Subject: [PATCH 227/268] cleanup

---
 src/antelope/stores/tokens.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/antelope/stores/tokens.ts b/src/antelope/stores/tokens.ts
index fcd743ee5..88f17adb4 100644
--- a/src/antelope/stores/tokens.ts
+++ b/src/antelope/stores/tokens.ts
@@ -94,8 +94,6 @@ export const useTokensStore = defineStore(store_name, {
                 feedbackStore.unsetLoading('fetchTokenPriceData');
                 return cachedPriceData.priceData;
             } else if (cachedPriceData && lastFetchIsWithin10Minutes) {
-                console.log(tokenAddressLower);
-
                 // we fetched the price data recently but it was stale or incomplete at that time; do not refetch
                 feedbackStore.unsetLoading('fetchTokenPriceData');
                 return null;

From 409e72abf16e93d93b6db74314ede1175603b1e4 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 13 Sep 2023 21:38:35 -0300
Subject: [PATCH 228/268] fixing unstaking ABI for OreId and WC

---
 src/antelope/stores/account.ts                |  1 +
 src/antelope/stores/balances.ts               |  9 ++--
 src/antelope/stores/rex.ts                    |  7 ++--
 src/antelope/stores/utils/abi/wrapTlos.ts     | 25 +++++++++--
 src/antelope/stores/utils/trx-utils.ts        | 15 +++++--
 .../authenticators/EVMAuthenticator.ts        | 13 +++++-
 .../authenticators/InjectedProviderAuth.ts    | 22 ++++------
 .../wallets/authenticators/OreIdAuth.ts       | 41 ++++++++++---------
 .../authenticators/WalletConnectAuth.ts       | 34 +++++++--------
 src/pages/evm/staking/StakingPageHeader.vue   |  5 +--
 10 files changed, 100 insertions(+), 72 deletions(-)

diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index 94dcd3a59..8bc35ec7e 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -185,6 +185,7 @@ export const useAccountStore = defineStore(store_name, {
 
                     localStorage.setItem('network', network);
                     localStorage.setItem('account', account);
+                    localStorage.setItem('rawAddress', rawAddress);
                     localStorage.setItem('isNative', 'false');
                     localStorage.setItem('autoLogin', authenticator.getName());
                     success = true;
diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 86333b41d..c760b9bed 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -270,14 +270,13 @@ export const useBalancesStore = defineStore(store_name, {
         },
         async subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<TransactionResponse> {
             this.trace('subscribeForTransactionReceipt', account.account, response.hash);
-            subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
-                this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
+            return subscribeForTransactionReceipt(account, response).then(({ newResponse, receipt }) => {
+                this.trace('subscribeForTransactionReceipt', newResponse.hash, 'receipt:', receipt.status, receipt);
                 if (receipt.status === 1) {
                     this.updateBalancesForAccount(CURRENT_CONTEXT, account);
                 }
-                return receipt;
+                return newResponse;
             });
-            return response;
         },
         async prepareWagmiSystemTokenTransferConfig(label: Label, to: string, amount: bigint): Promise<void> {
             const request = await prepareSendTransaction({
@@ -316,7 +315,7 @@ export const useBalancesStore = defineStore(store_name, {
                 } else {
                     const chain_settings = chain.settings as EVMChainSettings;
                     const account = useAccountStore().loggedAccount as EvmAccountModel;
-                    return await this.transferEVMTokens(label, chain_settings, account, token, to, amount)
+                    return this.transferEVMTokens(label, chain_settings, account, token, to, amount)
                         .then(r => this.subscribeForTransactionReceipt(account, r as TransactionResponse));
                 }
             } catch (error) {
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 76fa4d3dd..19824e7de 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -204,15 +204,14 @@ export const useRexStore = defineStore(store_name, {
          */
         async subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<TransactionResponse> {
             this.trace('subscribeForTransactionReceipt', account.account, response.hash);
-            subscribeForTransactionReceipt(account, response).then((receipt: ethers.providers.TransactionReceipt) => {
-                this.trace('subscribeForTransactionReceipt', response.hash, 'receipt:', receipt.status, receipt);
+            return subscribeForTransactionReceipt(account, response).then(({ newResponse, receipt }) => {
+                this.trace('subscribeForTransactionReceipt', newResponse.hash, 'receipt:', receipt.status, receipt);
                 if (receipt.status === 1) {
                     this.updateRexDataForAccount(CURRENT_CONTEXT, account);
                     useBalancesStore().updateBalancesForAccount(CURRENT_CONTEXT, account);
                 }
-                return receipt;
+                return newResponse;
             });
-            return response;
         },
         /**
          * Performs the staking of System Tokens for a given account on the REX system of a given network.
diff --git a/src/antelope/stores/utils/abi/wrapTlos.ts b/src/antelope/stores/utils/abi/wrapTlos.ts
index c86fee9b3..48b2a0c77 100644
--- a/src/antelope/stores/utils/abi/wrapTlos.ts
+++ b/src/antelope/stores/utils/abi/wrapTlos.ts
@@ -45,17 +45,34 @@ export const stlosAbiDeposit: EvmABI = [
 
 export const stlosAbiWithdraw: EvmABI = [
     {
-        constant: false,
         inputs: [
             {
                 indexed: false,
                 internalType: 'uint256',
-                name: 'wad',
+                name: 'assets',
+                type: 'uint256',
+            },
+            {
+                indexed: false,
+                internalType: 'address',
+                name: 'receiver',
+                type: 'address',
+            },
+            {
+                indexed: false,
+                internalType: 'address',
+                name: 'owner',
+                type: 'address',
+            },
+        ],
+        name: 'withdraw',
+        outputs: [
+            {
+                internalType: 'uint256',
+                name: '',
                 type: 'uint256',
             },
         ],
-        name: 'withdrawTLOS',
-        outputs: [],
         payable: false,
         stateMutability: 'nonpayable',
         type: 'function',
diff --git a/src/antelope/stores/utils/trx-utils.ts b/src/antelope/stores/utils/trx-utils.ts
index 9d7305fa0..6de1ba7a6 100644
--- a/src/antelope/stores/utils/trx-utils.ts
+++ b/src/antelope/stores/utils/trx-utils.ts
@@ -5,22 +5,29 @@ import { AntelopeError, TransactionResponse } from 'src/antelope/types';
 import { EVMAuthenticator } from 'src/antelope/wallets';
 
 
-export async function subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<ethers.providers.TransactionReceipt> {
+export async function subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<{
+    newResponse: TransactionResponse;
+    receipt: ethers.providers.TransactionReceipt;
+}> {
     if (account.isNative) {
         throw new AntelopeError('Not implemented yet for native');
     } else {
         const authenticator = account.authenticator as EVMAuthenticator;
         const provider = await authenticator.web3Provider();
+        const result = {
+            newResponse: { ...response } as TransactionResponse,
+            receipt: {} as ethers.providers.TransactionReceipt,
+        };
         if (provider) {
             const whenConfirmed = provider.waitForTransaction(response.hash);
             // we add the wait method to the response,
             // so that the caller can subscribe to the confirmation event
-            response.wait = async () => whenConfirmed;
-            return whenConfirmed;
+            result.newResponse.wait = async () => whenConfirmed;
+            return result;
         } else {
             if (usePlatformStore().isMobile) {
                 response.wait = async () => Promise.resolve({} as ethers.providers.TransactionReceipt);
-                return Promise.resolve({} as ethers.providers.TransactionReceipt);
+                return result;
             } else {
                 throw new AntelopeError('antelope.evm.error_no_provider');
             }
diff --git a/src/antelope/wallets/authenticators/EVMAuthenticator.ts b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
index b80989335..d5f42c080 100644
--- a/src/antelope/wallets/authenticators/EVMAuthenticator.ts
+++ b/src/antelope/wallets/authenticators/EVMAuthenticator.ts
@@ -2,7 +2,8 @@
 
 import { SendTransactionResult, WriteContractResult } from '@wagmi/core';
 import { BigNumber, ethers } from 'ethers';
-import { CURRENT_CONTEXT, getAntelope } from 'src/antelope';
+import { CURRENT_CONTEXT, getAntelope, useAccountStore } from 'src/antelope';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { useChainStore } from 'src/antelope/stores/chain';
 import { useEVMStore } from 'src/antelope/stores/evm';
 import { createTraceFunction, isTracingAll, useFeedbackStore } from 'src/antelope/stores/feedback';
@@ -43,6 +44,16 @@ export abstract class EVMAuthenticator {
         return true;
     }
 
+    // returns the associated account address acording to the label
+    getAccountAddress(): addressString {
+        return useAccountStore().getAccount(this.label).account as addressString;
+    }
+
+    // returns the associated chain settings acording to the label
+    getChainSettings(): EVMChainSettings {
+        return (useChainStore().getChain(this.label).settings as EVMChainSettings);
+    }
+
     async login(network: string): Promise<addressString | null> {
         this.trace('login', network);
         const chain = useChainStore();
diff --git a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
index 93d5e857c..a2d9fdb2c 100644
--- a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
+++ b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
@@ -2,7 +2,7 @@
 
 import { BigNumber, ethers } from 'ethers';
 import { BehaviorSubject, filter, map } from 'rxjs';
-import { useAccountStore, useChainStore, useEVMStore, useFeedbackStore } from 'src/antelope';
+import { useEVMStore, useFeedbackStore } from 'src/antelope';
 import {
     AntelopeError,
     ERC20_TYPE,
@@ -16,7 +16,6 @@ import {
 import { EVMAuthenticator } from 'src/antelope/wallets';
 import { AbiItem } from 'web3-utils';
 import Web3 from 'web3';
-import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { TELOS_NETWORK_NAMES, TELOS_ANALYTICS_EVENT_IDS } from 'src/antelope/chains/chain-constants';
 import { MetamaskAuthName, SafePalAuthName } from 'src/antelope/wallets';
 
@@ -75,7 +74,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
 
     async wrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse> {
         this.trace('wrapSystemToken', amount.toString());
-        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const chainSettings = this.getChainSettings();
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address;
         let wrappedSystemTokenContractInstance: ethers.Contract | undefined;
         try {
@@ -106,7 +105,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
 
     async unwrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse> {
         this.trace('unwrapSystemToken', amount.toString());
-        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const chainSettings = this.getChainSettings();
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address;
         let wrappedSystemTokenContractInstance: ethers.Contract | undefined;
 
@@ -137,7 +136,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
     }
 
     async login(network: string): Promise<addressString | null> {
-        const chainSettings = useChainStore().currentChain.settings as EVMChainSettings;
+        const chainSettings = this.getChainSettings();
         const authName = this.getName();
 
         this.trace('login', network);
@@ -252,10 +251,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
 
     async stakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
         this.trace('stakeSystemTokens', amount.toString());
-
-        const chain = useChainStore().getChain(this.label);
-        const stakedToken = (chain.settings as EVMChainSettings).getStakedSystemToken();
-
+        const stakedToken = this.getChainSettings().getStakedSystemToken();
         const evm = useEVMStore();
         const contract = await evm.getContract(this, stakedToken.address, stakedToken.type);
         if (contract) {
@@ -269,23 +265,19 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
 
     async unstakeSystemTokens(amount: BigNumber): Promise<EvmTransactionResponse> {
         this.trace('unstakeSystemTokens', amount.toString());
-
-        const chain = useChainStore().getChain(this.label);
-        const stakedToken = (chain.settings as EVMChainSettings).getStakedSystemToken();
-
+        const stakedToken = this.getChainSettings().getStakedSystemToken();
         const evm = useEVMStore();
         const contract = await evm.getContract(this, stakedToken.address, stakedToken.type);
         if (contract) {
             const contractInstance = await contract.getContractInstance();
             const amountInWei = amount.toString();
-            const address = useAccountStore().getAccount(this.label).account;
+            const address = this.getAccountAddress();
             return contractInstance.withdraw(amountInWei, address, address);
         } else {
             throw new AntelopeError('antelope.balances.error_token_contract_not_found', { address: stakedToken.address });
         }
     }
 
-
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
         return useEVMStore().isProviderOnTheCorrectChain(await this.web3Provider(), chainId);
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index ff9050e1d..e9d3d93bf 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -17,7 +17,6 @@ import {
 } from 'src/antelope/types';
 import { useFeedbackStore } from 'src/antelope/stores/feedback';
 import { useChainStore } from 'src/antelope/stores/chain';
-import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { RpcEndpoint } from 'universal-authenticator-library';
 import { TELOS_ANALYTICS_EVENT_IDS } from 'src/antelope/chains/chain-constants';
 
@@ -63,6 +62,11 @@ export class OreIdAuth extends EVMAuthenticator {
         return new OreIdAuth(this.options, label);
     }
 
+    // returns the associated account address acording to the label
+    getAccountAddress(): addressString {
+        return this.userChainAccount?.chainAccount as addressString;
+    }
+
     getNetworkNameFromChainNet(chainNetwork: ChainNetwork): string {
         this.trace('getNetworkNameFromChainNet', chainNetwork);
         switch (chainNetwork) {
@@ -89,7 +93,7 @@ export class OreIdAuth extends EVMAuthenticator {
 
     async login(network: string): Promise<addressString | null> {
         this.trace('login', network);
-        const chainSettings = useChainStore().currentChain.settings as EVMChainSettings;
+        const chainSettings = this.getChainSettings();
         const trackSuccessfulLogin = () => {
             this.trace('login', 'trackAnalyticsEvent -> generic login succeeded', TELOS_ANALYTICS_EVENT_IDS.loginSuccessful);
             chainSettings.trackAnalyticsEvent(
@@ -112,10 +116,10 @@ export class OreIdAuth extends EVMAuthenticator {
 
         if (
             localStorage.getItem('autoLogin') === this.getName() &&
-            typeof localStorage.getItem('account') === 'string'
+            typeof localStorage.getItem('rawAddress') === 'string'
         ) {
             // auto login without the popup
-            const chainAccount = localStorage.getItem('account') as addressString;
+            const chainAccount = localStorage.getItem('rawAddress') as addressString;
             this.userChainAccount = { chainAccount } as UserChainAccount;
             this.trace('login', 'userChainAccount', this.userChainAccount);
             // track the login start for auto-login procceess
@@ -209,7 +213,8 @@ export class OreIdAuth extends EVMAuthenticator {
         this.checkIntegrity();
 
         // prepare variables
-        const from = this.userChainAccount?.chainAccount as addressString;
+        // const from = this.userChainAccount?.chainAccount as addressString;
+        const from = this.getAccountAddress();
         const value = amount.toHexString();
         const abi = erc20Abi;
 
@@ -270,7 +275,7 @@ export class OreIdAuth extends EVMAuthenticator {
         const transaction = await oreIdInstance.createTransaction({
             transaction: json,
             chainAccount: from,
-            chainNetwork: this.getChainNetwork(useChainStore().getChain(this.label).settings.getNetwork()),
+            chainNetwork: this.getChainNetwork(this.getChainSettings().getNetwork()),
             signOptions: {
                 broadcast: true,
                 returnSignedTransaction: true,
@@ -291,9 +296,9 @@ export class OreIdAuth extends EVMAuthenticator {
         this.checkIntegrity();
 
         // prepare variables
-        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const chainSettings = this.getChainSettings();
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address as addressString;
-        const from = this.userChainAccount?.chainAccount as addressString;
+        const from = this.getAccountAddress();
         const value = amount.toHexString();
         const abi = wtlosAbiDeposit;
 
@@ -317,9 +322,9 @@ export class OreIdAuth extends EVMAuthenticator {
         this.checkIntegrity();
 
         // prepare variables
-        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const chainSettings = this.getChainSettings();
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address as addressString;
-        const from = this.userChainAccount?.chainAccount as addressString;
+        const from = this.getAccountAddress();
         const value = amount.toHexString();
         const abi = wtlosAbiWithdraw;
 
@@ -342,13 +347,12 @@ export class OreIdAuth extends EVMAuthenticator {
         this.checkIntegrity();
 
         // prepare variables
-        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const chainSettings = this.getChainSettings();
         const stakedSystemTokenContractAddress = chainSettings.getStakedSystemToken().address as addressString;
-        const from = this.userChainAccount?.chainAccount as addressString;
+        const from = this.getAccountAddress();
         const value = amount.toHexString();
         const abi = stlosAbiDeposit;
 
-        console.assert(stlosAbiDeposit.length === 1, 'warning: we are assuming stlosAbiDeposit has only one method');
         // transaction body: stake system token
         const stakeTransaction = {
             from,
@@ -369,9 +373,9 @@ export class OreIdAuth extends EVMAuthenticator {
         this.checkIntegrity();
 
         // prepare variables
-        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const chainSettings = this.getChainSettings();
         const stakedSystemTokenContractAddress = chainSettings.getStakedSystemToken().address as addressString;
-        const from = this.userChainAccount?.chainAccount as addressString;
+        const from = this.getAccountAddress();
         const value = amount.toHexString();
         const abi = stlosAbiWithdraw;
 
@@ -381,15 +385,14 @@ export class OreIdAuth extends EVMAuthenticator {
             to: stakedSystemTokenContractAddress,
             'contract': {
                 abi,
-                'parameters': [value],
-                'method': stlosAbiWithdraw[0].name,
+                'parameters': [value, from, from],
+                'method': 'withdraw',
             },
         } as unknown as JSONObject;
 
         return this.performOreIdTransaction(from, unstakeTransaction);
     }
 
-
     async isConnectedTo(chainId: string): Promise<boolean> {
         this.trace('isConnectedTo', chainId);
         return true;
@@ -398,7 +401,7 @@ export class OreIdAuth extends EVMAuthenticator {
     async web3Provider(): Promise<ethers.providers.Web3Provider> {
         this.trace('web3Provider');
         try {
-            const p:RpcEndpoint = (useChainStore().getChain(this.label).settings as EVMChainSettings).getRPCEndpoint();
+            const p:RpcEndpoint = this.getChainSettings().getRPCEndpoint();
             const url = `${p.protocol}://${p.host}:${p.port}${p.path ?? ''}`;
             const jsonRpcProvider = new ethers.providers.JsonRpcProvider(url);
             await jsonRpcProvider.ready;
diff --git a/src/antelope/wallets/authenticators/WalletConnectAuth.ts b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
index 8a3e2281a..95eeb4f46 100644
--- a/src/antelope/wallets/authenticators/WalletConnectAuth.ts
+++ b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
@@ -17,7 +17,6 @@ import {
 } from '@web3modal/ethereum';
 import { Web3Modal, Web3ModalConfig } from '@web3modal/html';
 import { BigNumber, ethers } from 'ethers';
-import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { TELOS_ANALYTICS_EVENT_IDS } from 'src/antelope/chains/chain-constants';
 import { useChainStore } from 'src/antelope/stores/chain';
 import { useEVMStore } from 'src/antelope/stores/evm';
@@ -75,7 +74,7 @@ export class WalletConnectAuth extends EVMAuthenticator {
 
     async walletConnectLogin(network: string): Promise<addressString | null> {
         this.trace('walletConnectLogin');
-        const chainSettings = useChainStore().currentChain.settings as EVMChainSettings;
+        const chainSettings = this.getChainSettings();
 
         try {
             this.clearAuthenticator();
@@ -133,7 +132,7 @@ export class WalletConnectAuth extends EVMAuthenticator {
                 'WalletConnect',
                 TELOS_ANALYTICS_EVENT_IDS.loginFailedWalletConnect,
             );
-            const chainSettings = useChainStore().currentChain.settings as EVMChainSettings;
+            const chainSettings = this.getChainSettings();
             chainSettings.trackAnalyticsEvent(
                 { id: TELOS_ANALYTICS_EVENT_IDS.loginFailedWalletConnect },
             );
@@ -146,7 +145,7 @@ export class WalletConnectAuth extends EVMAuthenticator {
     async login(network: string): Promise<addressString | null> {
         this.trace('login', network);
         const wagmiConnected = () => localStorage.getItem('wagmi.connected');
-        const chainSettings = useChainStore().currentChain.settings as EVMChainSettings;
+        const chainSettings = this.getChainSettings();
 
         useFeedbackStore().setLoading(`${this.getName()}.login`);
         if (wagmiConnected()) {
@@ -321,11 +320,11 @@ export class WalletConnectAuth extends EVMAuthenticator {
 
     async wrapSystemToken(amount: BigNumber): Promise<WriteContractResult> {
         this.trace('wrapSystemToken', amount.toString());
-        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const chainSettings = this.getChainSettings();
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address as addressString;
 
         const config = {
-            chainId: +useChainStore().getChain(this.label).settings.getChainId(),
+            chainId: +chainSettings.getChainId(),
             address: wrappedSystemTokenContractAddress,
             abi: wtlosAbiDeposit,
             functionName: 'deposit',
@@ -341,11 +340,11 @@ export class WalletConnectAuth extends EVMAuthenticator {
 
     async unwrapSystemToken(amount: BigNumber): Promise<WriteContractResult> {
         this.trace('unwrapSystemToken', amount.toString());
-        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const chainSettings = this.getChainSettings();
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address as addressString;
 
         const sendConfig = await prepareWriteContract({
-            chainId: +useChainStore().getChain(this.label).settings.getChainId(),
+            chainId: +chainSettings.getChainId(),
             address: wrappedSystemTokenContractAddress,
             abi: wtlosAbiWithdraw,
             functionName: 'withdraw',
@@ -358,7 +357,7 @@ export class WalletConnectAuth extends EVMAuthenticator {
 
     async stakeSystemTokens(amount: BigNumber): Promise<WriteContractResult> {
         this.trace('stakeSystemTokens', amount.toString());
-        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const chainSettings = this.getChainSettings();
         const stakedSystemTokenContractAddress = chainSettings.getStakedSystemToken().address as addressString;
 
         console.assert(stlosAbiDeposit.length === 1, 'warning: we are assuming stlosAbiDeposit has only one method');
@@ -376,20 +375,23 @@ export class WalletConnectAuth extends EVMAuthenticator {
 
     async unstakeSystemTokens(amount: BigNumber): Promise<WriteContractResult> {
         this.trace('unstakeSystemTokens', amount.toString());
-        const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
+        const chainSettings = this.getChainSettings();
         const stakedSystemTokenContractAddress = chainSettings.getStakedSystemToken().address as addressString;
+        const address = this.getAccountAddress();
 
-        console.assert(stlosAbiWithdraw.length === 1, 'warning: we are assuming stlosAbiWithdraw has only one method');
         const sendConfig = await prepareWriteContract({
-            chainId: +useChainStore().getChain(this.label).settings.getChainId(),
+            chainId: +chainSettings.getChainId(),
             address: stakedSystemTokenContractAddress,
             abi: stlosAbiWithdraw,
-            functionName: stlosAbiWithdraw[0].name,
+            functionName: 'withdraw',
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            args: [amount] as any[],
+            args: [amount, address, address] as any[],
         });
 
-        return await writeContract(sendConfig);
+        const trx = await writeContract(sendConfig);
+
+        this.trace('unstakeSystemTokens', '--> trx:', trx);
+        return trx;
     }
 
     async isConnectedTo(chainId: string): Promise<boolean> {
@@ -411,7 +413,7 @@ export class WalletConnectAuth extends EVMAuthenticator {
     async web3Provider(): Promise<ethers.providers.Web3Provider> {
         let web3Provider = null;
         if (usePlatformStore().isMobile || this.usingQR) {
-            const p:RpcEndpoint = (useChainStore().getChain(this.label).settings as EVMChainSettings).getRPCEndpoint();
+            const p:RpcEndpoint = this.getChainSettings().getRPCEndpoint();
             const url = `${p.protocol}://${p.host}:${p.port}${p.path ?? ''}`;
             web3Provider = new ethers.providers.JsonRpcProvider(url);
             this.trace('web3Provider', 'JsonRpcProvider ->', web3Provider);
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 98edcb318..da7ffdd91 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -178,10 +178,7 @@ const secondLineData = computed(() => [{
     useSmallBox: true,
 }]);
 
-// creatmos un interval que cada 5 segundos verifique si cada uno de los loadings es true o false.
-// por cada loading que encontremos en true, debemos llamar a actualizar las dependendicas de ese loading
-// si todos los loadings son false, entonces podemos parar el intervalo
-
+// is interval is mean to ensure all data is eventually loaded
 const intervalTimer = setInterval(() => {
 
     // is staking still loading?

From 5802d30f4b72779602920479e884c56de5a07e28 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Thu, 14 Sep 2023 13:14:00 -0400
Subject: [PATCH 229/268] transfers performance fix

---
 src/antelope/stores/history.ts | 51 ++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 51764d62c..d05108ba3 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -69,9 +69,7 @@ export interface HistoryState {
         [label: Label]: EVMTransactionsPaginationData,
     },
     __evm_nft_transfers: {
-        [label: Label]: {
-            transfers: EvmTransfer[],
-        },
+        [label: Label]: Map<string, EvmTransfer[]>, // key is the transaction hash in lowercase
     },
 }
 
@@ -95,7 +93,7 @@ export const useHistoryStore = defineStore(store_name, {
         getShapedTransactionRows: state => (label: Label): ShapedTransactionRow[] => state.__shaped_evm_transaction_rows[label],
         getEVMTransactionsPagination: state => (label: Label): EVMTransactionsPaginationData => state.__evm_transactions_pagination_data[label],
         getEvmTransactionsRowCount: state => (label: Label): number => state.__total_evm_transaction_count[label],
-        getEvmNftTransfers: state => (label: Label): EvmTransfer[] => state.__evm_nft_transfers[label].transfers,
+        getEvmNftTransfersForTransaction: state => (label: Label, transaction: string): EvmTransfer[] => state.__evm_nft_transfers[label].get(transaction.toLowerCase()) ?? [],
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -138,7 +136,7 @@ export const useHistoryStore = defineStore(store_name, {
                 // so if the user has not fetched NFT transfers yet, or if the NFT transfers are stale (3 mins),
                 // fetch them now
                 if (
-                    !this.__evm_nft_transfers[label].transfers.length ||
+                    this.__evm_nft_transfers[label].size === 0 ||
                     (nftTransfersUpdated && dateIsWithinXMinutes(nftTransfersUpdated, 3))
                 ) {
                     await this.fetchEvmNftTransfersForAccount(label, this.__evm_filter.address);
@@ -230,10 +228,16 @@ export const useHistoryStore = defineStore(store_name, {
                 const transfers = [
                     ...erc721TransferResponse.results,
                     ...erc1155TransferResponse.results,
-                ];
-
-                // sort transfers from new to old
-                transfers.sort((a, b) => b.timestamp - a.timestamp);
+                ].reduce(
+                    (acc, xfer) => {
+                        const hashLower = xfer.transaction.toLowerCase();
+                        const existingTransfers = acc.get(hashLower) ?? [];
+                        existingTransfers.push(xfer);
+                        acc.set(hashLower, existingTransfers);
+                        return acc;
+                    },
+                    new Map<string, EvmTransfer[]>(),
+                );
 
                 this.setEvmNftTransfers(label, transfers);
             } catch (error) {
@@ -255,8 +259,6 @@ export const useHistoryStore = defineStore(store_name, {
             const chainSettings = (chain.settings as EVMChainSettings);
             const tlosInUsd = await chainSettings.getUsdPrice();
 
-            const allNftTransfers = this.__evm_nft_transfers[label].transfers;
-
             const transactionShapePromises = transactions.map(async (tx) => {
                 const erc20Transfers = await contractStore.getErc20TransfersFromTransaction(tx);
                 const userAddressLower = this.__evm_filter.address.toLowerCase();
@@ -313,7 +315,7 @@ export const useHistoryStore = defineStore(store_name, {
                         }
                     }
 
-                    const nftTransfersInTx = allNftTransfers.filter(transfer => transfer.transaction.toLowerCase() === tx.hash.toLowerCase());
+                    const nftTransfersInTx = this.getEvmNftTransfersForTransaction(label, tx.hash);
 
                     if (nftTransfersInTx.length > 0) {
                         // there is at least 1 NFT transfer in this transaction,
@@ -460,18 +462,27 @@ export const useHistoryStore = defineStore(store_name, {
         },
         clearEvmTransactions() {
             this.trace('clearEvmTransactions');
+
             this.setEVMTransactionsFilter({ address: '' });
-            this.setEVMTransactions(CURRENT_CONTEXT, []);
-            this.setShapedTransactionRows(CURRENT_CONTEXT, []);
-            this.setEvmTransactionsRowCount(CURRENT_CONTEXT, 0);
+            this.__evm_transactions = {
+                [CURRENT_CONTEXT]: {
+                    transactions: [],
+                },
+            };
+            this.__shaped_evm_transaction_rows = {
+                [CURRENT_CONTEXT]: [],
+            };
+            this.__total_evm_transaction_count = {
+                [CURRENT_CONTEXT]: 0,
+            };
         },
-        setEvmNftTransfers(label: Label, transfers: EvmTransfer[]): void {
+        setEvmNftTransfers(label: Label, transfers: Map<string, EvmTransfer[]>): void {
             this.trace('setEvmNftTransfers', transfers);
-            this.__evm_nft_transfers[label].transfers = transfers;
+            this.__evm_nft_transfers[label] = transfers;
         },
         clearEvmNftTransfers(): void {
             this.trace('clearEvmNftTransfers');
-            this.setEvmNftTransfers(CURRENT_CONTEXT, []);
+            this.__evm_nft_transfers = { [CURRENT_CONTEXT]: new Map() };
         },
     },
 });
@@ -493,8 +504,6 @@ const historyInitialState: HistoryState = {
     },
     __evm_transactions_pagination_data: {},
     __evm_nft_transfers: {
-        current: {
-            transfers: [],
-        },
+        current: new Map(),
     },
 };

From 42ed4e9850673fb912ccd30ce8734dfa4272d3ee Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Thu, 14 Sep 2023 13:22:23 -0400
Subject: [PATCH 230/268] fix duplicate network calls

---
 src/antelope/stores/history.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index d05108ba3..686eb7d47 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -137,7 +137,7 @@ export const useHistoryStore = defineStore(store_name, {
                 // fetch them now
                 if (
                     this.__evm_nft_transfers[label].size === 0 ||
-                    (nftTransfersUpdated && dateIsWithinXMinutes(nftTransfersUpdated, 3))
+                    (nftTransfersUpdated && !dateIsWithinXMinutes(nftTransfersUpdated, 3))
                 ) {
                     await this.fetchEvmNftTransfersForAccount(label, this.__evm_filter.address);
                 }

From e13cdf0b75a6059a67c8ef92be4e8b3b05a2e848 Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Sat, 16 Sep 2023 14:09:30 -0500
Subject: [PATCH 231/268] fix: bypass fuel service init for ore id users

---
 src/antelope/stores/account.ts | 3 ++-
 src/api/fuel.js                | 9 +++++----
 src/store/account/actions.js   | 3 ++-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index 94dcd3a59..2047e9bc9 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -120,7 +120,8 @@ export const useAccountStore = defineStore(store_name, {
                 await authenticator.init();
                 const ualUsers = await authenticator.login();
                 if (ualUsers?.length) {
-                    const ualUser = await initFuelUserWrapper(ualUsers[0]);
+                    // OreId has it's own authorization service, only init fuel service for other ual users
+                    const ualUser = (ualUsers[0]).constructor.name === 'OreIdAuthenticator' ? ualUsers[0] : await initFuelUserWrapper(ualUsers[0]);
                     const permission = (ualUser as unknown as { requestPermission: string })
                         .requestPermission ?? 'active';
                     const account = await ualUser.getAccountName();
diff --git a/src/api/fuel.js b/src/api/fuel.js
index 3612d3383..708479765 100644
--- a/src/api/fuel.js
+++ b/src/api/fuel.js
@@ -42,7 +42,7 @@ const resourceProviderEndpoint = `${fuelrpc}/v1/resource_provider/request_transa
 // Use initFuelUserWrapper() method to initialize an instance of the class
 class FuelUserWrapper extends User {
   user = null;
-  available = false;
+  fuelServiceEnabled = false;
 
   constructor(user/*: User*/) {
       super();
@@ -55,7 +55,8 @@ class FuelUserWrapper extends User {
           return;
       };
       try {
-          this.available = (await fetch(fuelrpc)).status === 200;
+          // verify fuel service is available
+          this.fuelServiceEnabled = (await fetch(fuelrpc)).status === 200;
       } catch(e) {
           console.error(e);
       }
@@ -66,8 +67,8 @@ class FuelUserWrapper extends User {
       originalconfig, /*: SignTransactionConfig*/
   )/*: Promise<SignTransactionResponse>*/ {
       try {
-      // if fuel is not supported, just let the normal implementation to perform
-          if (!this.available) {
+          // if fuel service disabled, send tx using generic ual user method
+          if (!this.fuelServiceEnabled) {
               return this.user.signTransaction(originalTransaction, originalconfig);
           }
 
diff --git a/src/store/account/actions.js b/src/store/account/actions.js
index 65f6d52db..9bbc9ef33 100644
--- a/src/store/account/actions.js
+++ b/src/store/account/actions.js
@@ -20,7 +20,8 @@ export const login = async function(
         commit('setJustViewer', justViewer);
         const users = await authenticator.login(account);
         if (users.length) {
-            const account = await initFuelUserWrapper(users[0]);
+            // OreId has it's own authorization service, only init fuel service for other ual users
+            const account = (users[0]).constructor.name === 'OreUser' ? users[0] : await initFuelUserWrapper(users[0]);
             const accountName = await account.getAccountName();
             this.$ualUser = account;
             this.$type = 'ual';

From 56e4bf01f5a60e9fa21f599fbb92f0b01ee6e774 Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Sat, 16 Sep 2023 14:25:00 -0500
Subject: [PATCH 232/268] fix: disregard thrown error on evm address lookup,
 accountName var reference in check resources

---
 src/pages/home/NativeLoginButton.vue |  2 +-
 src/store/account/actions.js         | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/pages/home/NativeLoginButton.vue b/src/pages/home/NativeLoginButton.vue
index 521e78800..d93bbb94d 100644
--- a/src/pages/home/NativeLoginButton.vue
+++ b/src/pages/home/NativeLoginButton.vue
@@ -179,7 +179,7 @@ export default defineComponent({
         },
 
         async checkResources() {
-            if (!accountName) {
+            if (!this.accountName) {
                 return;
             }
             await this.getRamPrice();
diff --git a/src/store/account/actions.js b/src/store/account/actions.js
index 9bbc9ef33..9c09f3ae1 100644
--- a/src/store/account/actions.js
+++ b/src/store/account/actions.js
@@ -158,13 +158,21 @@ export const accountExists = async function({ commit, dispatch }, accountName) {
 };
 
 export const setEvmState = async function({ commit, dispatch }) {
+    let evmAccount;
+
     if (!this.state.account.accountName) {
         return;
     }
 
-    const evmAccount = await this.$evmApi.telos.getEthAccountByTelosAccount(
-        this.state.account.accountName,
-    );
+    // If linked evm address does not exist, disregard error
+    try {
+        evmAccount = await this.$evmApi.telos.getEthAccountByTelosAccount(
+            this.state.account.accountName,
+        );
+    } catch(e) {
+        // `No address associated with ${account}` unnec error thrown on failed lookup
+        return;
+    }
 
     if (evmAccount && evmAccount.address){
         commit('setEvmAddress', evmAccount.address);

From 0392ad7d5be6fcd46bf393052f4268f8bc1b50da Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Sat, 16 Sep 2023 14:30:00 -0500
Subject: [PATCH 233/268] fix: remove unused style vars

---
 src/pages/native/balance/BuyAmount.vue  | 4 ++--
 src/pages/native/balance/SendAmount.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/native/balance/BuyAmount.vue b/src/pages/native/balance/BuyAmount.vue
index d943c03de..3d805e1d5 100644
--- a/src/pages/native/balance/BuyAmount.vue
+++ b/src/pages/native/balance/BuyAmount.vue
@@ -268,7 +268,7 @@ export default {
                                 <label
                                     class="text-weight-regular q-ml-sm"
                                     :style="
-                                        `font-size: ${amountFontSize}px; color: ${themeColor}`
+                                        `font-size: ${amountFontSize}px;`
                                     "
                                 >
                                     {{ coinInput ? selectedCoin.symbol : "" }}
@@ -277,7 +277,7 @@ export default {
                             <label
                                 class="text-weight-regular full-width mobile-only"
                                 :style="
-                                    `font-size: ${amountFontSize}px; color: ${themeColor}`
+                                    `font-size: ${amountFontSize}px;`
                                 "
                             >
                                 {{
diff --git a/src/pages/native/balance/SendAmount.vue b/src/pages/native/balance/SendAmount.vue
index 36ecd0c65..b71f2d7b6 100644
--- a/src/pages/native/balance/SendAmount.vue
+++ b/src/pages/native/balance/SendAmount.vue
@@ -225,7 +225,7 @@ export default {
                     <div class="desktop-only flex flex-center">
                         <label
                             class="text-weight-regular q-mr-sm"
-                            :style="`font-size: ${amountFontSize}px; color: ${themeColor}`"
+                            :style="`font-size: ${amountFontSize}px;`"
                         >
                             {{ coinInput ? `` : "$ " }}
                         </label>
@@ -254,7 +254,7 @@ export default {
                     <div class="mobileAmountContainer full-width mobile-only">
                         <label
                             class="text-weight-regular"
-                            :style="`font-size: ${amountFontSizeMobile}px; color: ${themeColor}`"
+                            :style="`font-size: ${amountFontSizeMobile}px;`"
                         >
                             {{
                                 coinInput

From 402ee8dc6493497d880381167a8a3c4c0ae1a191 Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Sat, 16 Sep 2023 14:33:12 -0500
Subject: [PATCH 234/268] refactor: remove console log

---
 src/antelope/wallets/authenticators/InjectedProviderAuth.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
index 8fb65a952..0997ce19f 100644
--- a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
+++ b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
@@ -105,7 +105,6 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
     }
 
     async unwrapSystemToken(amount: BigNumber): Promise<EvmTransactionResponse> {
-        console.log('unwrapSystemToken', amount.toString());
         const chainSettings = (useChainStore().currentChain.settings as EVMChainSettings);
         const wrappedSystemTokenContractAddress = chainSettings.getWrappedSystemToken().address;
         let wrappedSystemTokenContractInstance: ethers.Contract | undefined;

From 670838836149f985944a954c94753ffea54c784c Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Sat, 16 Sep 2023 14:50:52 -0500
Subject: [PATCH 235/268] refactor: ualUser assignment

---
 src/store/account/actions.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/store/account/actions.js b/src/store/account/actions.js
index 9c09f3ae1..2a7b71ecc 100644
--- a/src/store/account/actions.js
+++ b/src/store/account/actions.js
@@ -21,9 +21,8 @@ export const login = async function(
         const users = await authenticator.login(account);
         if (users.length) {
             // OreId has it's own authorization service, only init fuel service for other ual users
-            const account = (users[0]).constructor.name === 'OreUser' ? users[0] : await initFuelUserWrapper(users[0]);
-            const accountName = await account.getAccountName();
-            this.$ualUser = account;
+            this.$ualUser = (users[0]).constructor.name === 'OreUser' ? users[0] : await initFuelUserWrapper(users[0]);
+            const accountName = await this.$ualUser.getAccountName();
             this.$type = 'ual';
             this.$idx = idx;
             commit('setAccountName', accountName);

From f3fc9a7ceb365bcea540591c117d549451924e92 Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Sat, 16 Sep 2023 14:57:50 -0500
Subject: [PATCH 236/268] doc: expand comment on eth account look up

---
 src/store/account/actions.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/store/account/actions.js b/src/store/account/actions.js
index 2a7b71ecc..9175b6cdc 100644
--- a/src/store/account/actions.js
+++ b/src/store/account/actions.js
@@ -163,13 +163,13 @@ export const setEvmState = async function({ commit, dispatch }) {
         return;
     }
 
-    // If linked evm address does not exist, disregard error
+    // If linked evm address does not exist, disregard error as this will always throw for newly created native accounts
     try {
         evmAccount = await this.$evmApi.telos.getEthAccountByTelosAccount(
             this.state.account.accountName,
         );
     } catch(e) {
-        // `No address associated with ${account}` unnec error thrown on failed lookup
+        // `No address associated with ${account}`
         return;
     }
 

From 12cf0cbce64513959dffe34e8c60178b6bbf825b Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Sat, 16 Sep 2023 15:03:12 -0500
Subject: [PATCH 237/268] refactor: getAuth method

---
 src/antelope/stores/account.ts     | 2 +-
 src/antelope/wallets/index.ts      | 4 ++--
 src/pages/home/EVMLoginButtons.vue | 4 ++--
 test/jest/utils/antelope/index.ts  | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index 2047e9bc9..e486dac2d 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -257,7 +257,7 @@ export const useAccountStore = defineStore(store_name, {
                             network,
                         });
                     } else {
-                        const authenticator = getAntelope().wallets.getAutenticator(autoLogin)?.newInstance(label);
+                        const authenticator = getAntelope().wallets.getAuthenticator(autoLogin)?.newInstance(label);
                         if (!authenticator) {
                             console.error(getAntelope().wallets);
                             throw new Error('antelope.account.error_auto_login');
diff --git a/src/antelope/wallets/index.ts b/src/antelope/wallets/index.ts
index 33b7ee216..179771eaa 100644
--- a/src/antelope/wallets/index.ts
+++ b/src/antelope/wallets/index.ts
@@ -22,8 +22,8 @@ export class AntelopeWallets {
         this.authenticators.set(authenticator.getName(), authenticator);
     }
 
-    getAutenticator(name: string) {
-        this.trace('getAutenticator', name);
+    getAuthenticator(name: string) {
+        this.trace('getAuthenticator', name);
         return this.authenticators.get(name);
     }
 }
diff --git a/src/pages/home/EVMLoginButtons.vue b/src/pages/home/EVMLoginButtons.vue
index 70b67125a..a80621578 100644
--- a/src/pages/home/EVMLoginButtons.vue
+++ b/src/pages/home/EVMLoginButtons.vue
@@ -49,7 +49,7 @@ export default defineComponent({
 
         const setOreIdAuthenticator = async (provider: string) => {
             const name = 'OreId';
-            const auth = ant.wallets.getAutenticator(name);
+            const auth = ant.wallets.getAuthenticator(name);
             if (auth) {
                 (auth as OreIdAuth).setProvider(provider);
                 selectedOAuthProvider.value = provider;
@@ -67,7 +67,7 @@ export default defineComponent({
         };
 
         const setAuthenticator = async(name: string, label: string) => {
-            const auth = ant.wallets.getAutenticator(name);
+            const auth = ant.wallets.getAuthenticator(name);
             if (!auth) {
                 console.error(`${name} authenticator not found`);
                 return;
diff --git a/test/jest/utils/antelope/index.ts b/test/jest/utils/antelope/index.ts
index a1d6dfe35..6fb36a140 100644
--- a/test/jest/utils/antelope/index.ts
+++ b/test/jest/utils/antelope/index.ts
@@ -18,7 +18,7 @@ export const getAntelope = jest.fn().mockImplementation(() => ({
         errorToStringHandler: jest.fn(),
     },
     wallets: {
-        getAutenticator: () => ({
+        getAuthenticator: () => ({
             newInstance: (label: string) => ({
                 label,
                 isConnectedTo: () => Promise.resolve(true),

From f821cdbf585967de664d2882b81292094f1d9be0 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 18 Sep 2023 02:56:13 -0300
Subject: [PATCH 238/268] fixing remaining details

---
 src/antelope/stores/balances.ts             |   6 +-
 src/antelope/stores/rex.ts                  |  12 +-
 src/i18n/en-us/index.js                     |   6 +
 src/pages/evm/staking/StakingPageHeader.vue |   2 +-
 src/pages/evm/staking/WithdrawRaw.vue       | 129 +++++++++++++++-----
 src/pages/evm/staking/WithdrawTab.vue       |   9 ++
 6 files changed, 125 insertions(+), 39 deletions(-)

diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index c760b9bed..af86d1e59 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -271,10 +271,10 @@ export const useBalancesStore = defineStore(store_name, {
         async subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<TransactionResponse> {
             this.trace('subscribeForTransactionReceipt', account.account, response.hash);
             return subscribeForTransactionReceipt(account, response).then(({ newResponse, receipt }) => {
-                this.trace('subscribeForTransactionReceipt', newResponse.hash, 'receipt:', receipt.status, receipt);
-                if (receipt.status === 1) {
+                newResponse.wait().then(() => {
+                    this.trace('subscribeForTransactionReceipt', newResponse.hash, 'receipt:', receipt.status, receipt);
                     this.updateBalancesForAccount(CURRENT_CONTEXT, account);
-                }
+                });
                 return newResponse;
             });
         },
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 4419f83df..a1f865d71 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -204,11 +204,11 @@ export const useRexStore = defineStore(store_name, {
         async subscribeForTransactionReceipt(account: AccountModel, response: TransactionResponse): Promise<TransactionResponse> {
             this.trace('subscribeForTransactionReceipt', account.account, response.hash);
             return subscribeForTransactionReceipt(account, response).then(({ newResponse, receipt }) => {
-                this.trace('subscribeForTransactionReceipt', newResponse.hash, 'receipt:', receipt.status, receipt);
-                if (receipt.status === 1) {
+                newResponse.wait().then(() => {
+                    this.trace('subscribeForTransactionReceipt', newResponse.hash, 'receipt:', receipt.status, receipt);
                     this.updateRexDataForAccount(CURRENT_CONTEXT, account);
                     useBalancesStore().updateBalancesForAccount(CURRENT_CONTEXT, account);
-                }
+                });
                 return newResponse;
             });
         },
@@ -292,9 +292,11 @@ export const useRexStore = defineStore(store_name, {
             (this.__rexData[label] as EvmRexModel).withdrawable = withdrawable;
         },
         setDeposits(label: string, deposits: EvmRexDeposit[]) {
-            this.trace('setDeposits', label, ... deposits.map(d => parseFloat(ethers.utils.formatUnits(d.amount, this.getStakingDecimals()))));
+            const copia = deposits.slice();
+            copia.sort((a, b) => a.until.toNumber() - b.until.toNumber());
+            this.trace('setDeposits', label, ... copia.map(d => parseFloat(ethers.utils.formatUnits(d.amount, this.getStakingDecimals()))));
             this.__rexData[label] = this.__rexData[label] || {};
-            (this.__rexData[label] as EvmRexModel).deposits = deposits;
+            (this.__rexData[label] as EvmRexModel).deposits = copia;
         },
         setBalance(label: string, balance: ethers.BigNumber) {
             const num = parseFloat(ethers.utils.formatUnits(balance, this.getStakingDecimals()));
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 365becdbd..ae7ed02da 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -573,5 +573,11 @@ export default {
             error_getting_wrapped_contract: 'An error occurred while getting the wrapped system token contract',
             error_wrap: 'An unknown error occurred while wrapping system token',
         },
+        words: {
+            days: 'days',
+            hours: 'hours',
+            minutes: 'minutes',
+            seconds: 'seconds',
+        },
     },
 };
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index da7ffdd91..0ca77210a 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -81,7 +81,7 @@ const unstakingBalanceBn = computed(() => {
     }
 });
 const unstakingFiatValueBn = computed(() => {
-    if (unstakingBalanceBn.value && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
+    if (unstakingBalanceBn.value && !unstakingBalanceBn.value.isZero() && systemTokenPrice.value && !systemTokenPrice.value.isZero()) {
         const ratioNumber = ethers.utils.formatUnits(systemTokenPrice.value, systemToken.price.decimals);
         return convertCurrency(unstakingBalanceBn.value, stakedToken.decimals, systemToken.decimals, ratioNumber);
     } else {
diff --git a/src/pages/evm/staking/WithdrawRaw.vue b/src/pages/evm/staking/WithdrawRaw.vue
index 10942ba7e..f4300fd65 100644
--- a/src/pages/evm/staking/WithdrawRaw.vue
+++ b/src/pages/evm/staking/WithdrawRaw.vue
@@ -3,7 +3,7 @@ import { defineComponent, PropType } from 'vue';
 
 import InlineSvg from 'vue-inline-svg';
 
-import { CURRENT_CONTEXT, useChainStore, useEVMStore, useUserStore } from 'src/antelope';
+import { CURRENT_CONTEXT, useChainStore, useEVMStore, useRexStore, useUserStore } from 'src/antelope';
 
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { EvmRexDeposit } from 'src/antelope/types';
@@ -23,15 +23,12 @@ export default defineComponent({
         InlineSvg,
         ToolTip,
     },
+    emits: ['update-rex-data'],
     data() {
         return {
-            iconSrc: 'src/assets/icon--calendar-clock.svg',
-            iconAlt: '',
-            withdrawalStatus: 'Unstaking for 2 days 3 hours',
-            withdrawalDate: 'Withdraw it on Feb 12, 2023 09:32 AM',
-            externalHash: '0x3db63fd9fc379161f2e2f6381153b2a77923f8b65dd04723dd4ab6b8ef3fbc06',
-            externalUrl: 'https://teloscan.io/tx/0x3db63fd9fc379161f2e2f6381153b2a77923f8b65dd04723dd4ab6b8ef3fbc06',
-            externalPurpose: 'View on Teloscan',
+            now: Date.now(),
+            pendingTime: '',
+            timer: setTimeout(() => {}, 0),
         };
     },
     props: {
@@ -47,22 +44,8 @@ export default defineComponent({
         longDate(): string {
             return getFormatedDate(this.epoch, 'MMM d, yyyy hh:mm a', false);
         },
-        pendingTime(): string {
-            const seconds = this.epoch - Date.now() / 1000;
-            const days = Math.floor(seconds / 86400);
-            const hours = Math.floor((seconds % 86400) / 3600);
-            const minutes = Math.floor((seconds % 3600) / 60);
-            const secondsLeft = Math.floor(seconds % 60);
-
-            const daysStr = days > 0 ? `${days} days ` : '';
-            const hoursStr = hours > 0 ? `${hours} hours ` : '';
-            const minutesStr = (!days && minutes > 0) ? `${minutes} minutes ` : '';
-            const secondsStr = (!days && !hours && secondsLeft > 0) ? `${secondsLeft} seconds ` : '';
-
-            return `${daysStr}${hoursStr}${minutesStr}${secondsStr}`;
-        },
         isWithdrawable(): boolean {
-            return this.epoch <= Date.now() / 1000;
+            return this.epoch <= this.now / 1000;
         },
         token() {
             const settings = chainStore.getChain(CURRENT_CONTEXT).settings as EVMChainSettings;
@@ -125,12 +108,71 @@ export default defineComponent({
         },
     },
     methods: {
+        updatePendingTime() {
+            this.now = Date.now();
+            const w_days = this.$t('antelope.words.days');
+            const w_hours = this.$t('antelope.words.hours');
+            const w_minutes = this.$t('antelope.words.minutes');
+            const w_seconds = this.$t('antelope.words.seconds');
+
+            const seconds = this.epoch - this.now / 1000;
+            const days = Math.floor(seconds / 86400);
+            const hours = Math.floor((seconds % 86400) / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            const secondsLeft = Math.floor(seconds % 60);
+
+            const daysStr = days > 0 ? `${days} ${w_days} ` : '';
+            const hoursStr = hours > 0 ? `${hours} ${w_hours} ` : '';
+            const minutesStr = (!days && minutes > 0) ? `${minutes} ${w_minutes} ` : '';
+            const secondsStr = (!days && !hours && secondsLeft > 0) ? `${secondsLeft} ${w_seconds} ` : '';
+
+            this.pendingTime = `${daysStr}${hoursStr}${minutesStr}${secondsStr}`;
+        },
         formatTooltipBalance(amount: number, isFiat: boolean): string {
             const decimals = isFiat ? 2 : 4;
             const symbol = isFiat ? fiatCurrency : this.token.symbol;
 
             return `${prettyPrintCurrency(amount, decimals, fiatLocale)} ${symbol}`;
         },
+        enterSecondUpdatedinterval() {
+            clearInterval(this.timer);
+            this.timer = setInterval(() => {
+                this.updatePendingTime();
+                if (this.pendingTime === '') {
+                    // final case
+                    this.$emit('update-rex-data');
+                    clearInterval(this.timer);
+                    console.log('clear interval');
+                }
+            }, 1000);
+        },
+        scheduleMinuteUpdatePendingTime() {
+            const word_seconds = this.$t('antelope.words.seconds');
+            this.updatePendingTime();
+            if (this.pendingTime.includes(word_seconds)) {
+                this.enterSecondUpdatedinterval();
+                return;
+            } else {
+                setTimeout(() => {
+                    this.updatePendingTime();
+                    this.scheduleMinuteUpdatePendingTime();
+                }, 60000);
+            }
+        },
+    },
+    mounted() {
+        this.scheduleMinuteUpdatePendingTime();
+    },
+    beforeUnmount() {
+        clearInterval(this.timer);
+    },
+    watch: {
+        withdrawal: {
+            handler() {
+                this.scheduleMinuteUpdatePendingTime();
+            },
+            deep: true,
+        },
     },
 });
 </script>
@@ -141,13 +183,14 @@ export default defineComponent({
         <div class="c-stake-withdrawal-row__left-icon">
             <InlineSvg
                 :src="require(`src/assets/icon--calendar-${isWithdrawable?'check':'clock'}.svg`)"
-                :alt="$t(iconAlt)"
                 class="c-stake-withdrawal-row__icon"
                 height="24"
                 width="24"
                 aria-hidden="true"
             />
         </div>
+    </div>
+    <div class="c-stake-withdrawal-row__middle-container">
         <div class="c-stake-withdrawal-row__left-content">
             <div>
                 <span class="c-stake-withdrawal-row__withdrawal-status">
@@ -188,8 +231,6 @@ export default defineComponent({
 .c-stake-withdrawal-row {
     $this: &;
 
-    display: flex;
-    justify-content: space-between;
     border-radius: 4px;
     border-bottom: 2px solid var(--header-bg-color);
     padding: 24px 4px;
@@ -197,13 +238,34 @@ export default defineComponent({
     max-width: 100%;
     min-width: 0;
 
-    &__left-container,
+    display: grid;
+    gap: 16px 8px;
+    justify-items: start;
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+        'a b'
+        'a c';
+
+    @include sm-and-up {
+        grid-template-areas: 'a b c';
+        grid-template-columns: auto 1fr auto;
+        &__right-container {
+            justify-self: end;
+        }
+    }
+
+    &__left-container {
+        grid-area: a;
+    }
+    &__middle-container,
     &__right-container {
         display: flex;
         width: max-content;
+        text-align: left;
     }
 
-    &__left-container {
+    &__middle-container {
+        grid-area: b;
         @include text--paragraph;
         color: var(--text-default-contrast);
         display: flex;
@@ -213,25 +275,32 @@ export default defineComponent({
         white-space: nowrap;
     }
 
+    &__right-container {
+        grid-area: c;
+    }
+
     &__withdrawal-status {
         @include text--paragraph-bold;
     }
 
-    &__left-content {
+    &__middle-content {
         display: flex;
         flex-direction: column;
     }
 
     &__balance-container {
         display: flex;
-        align-items: flex-end;
         justify-content: center;
+        align-items: flex-start;
         gap: 8px;
 
         flex-direction: column;
         flex-shrink: 1;
         text-align: right;
         min-width: 0;
+        @include sm-and-up {
+            align-items: flex-end;
+        }
     }
 
     &__primary-amount,
diff --git a/src/pages/evm/staking/WithdrawTab.vue b/src/pages/evm/staking/WithdrawTab.vue
index 6af0a3a81..4219d2924 100644
--- a/src/pages/evm/staking/WithdrawTab.vue
+++ b/src/pages/evm/staking/WithdrawTab.vue
@@ -85,6 +85,14 @@ const handleWithdrawClick = async () => {
     }
 };
 
+// handler of update-rex-data event
+const updateRexData = () => {
+    console.log('WithdrawTab.updateRexData');
+    useRexStore().updateRexData(CURRENT_CONTEXT);
+};
+
+// we call to update the data
+updateRexData();
 
 </script>
 
@@ -109,6 +117,7 @@ const handleWithdrawClick = async () => {
             :key="`withdrawal-${index}`"
             :withdrawal="withdrawal"
             class="q-mb-xs"
+            @update-rex-data="updateRexData"
         />
     </div>
     <div

From 49947ffb6057c00abd85092f71c3bdd6de27949d Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Mon, 18 Sep 2023 16:03:13 -0400
Subject: [PATCH 239/268] fix readonly vmodel warning

---
 src/pages/evm/staking/StakingTab.vue   | 2 +-
 src/pages/evm/staking/UnstakingTab.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index d598e2a62..a264176a3 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -203,7 +203,7 @@ async function handleCtaClick() {
     <div class="row q-mb-lg">
         <div class="col-12">
             <CurrencyInput
-                v-model="outputModelValue"
+                :model-value="outputModelValue"
                 :symbol="stakedTokenSymbol"
                 :decimals="stakedTokenDecimals"
                 :decimals-to-display="uiDecimals"
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index 8bcdffd26..9c77ad261 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -178,7 +178,7 @@ async function handleCtaClick() {
     <div class="row q-mb-lg">
         <div class="col-12">
             <CurrencyInput
-                v-model="outputModelValue"
+                :model-value="outputModelValue"
                 :symbol="systemTokenSymbol"
                 :decimals="systemTokenDecimals"
                 :decimals-to-display="uiDecimals"

From 3836e659f6503365bc6f97000612cb3cc437eb0b Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 18 Sep 2023 17:19:45 -0300
Subject: [PATCH 240/268] changing netlify configuration - NETWORK = "testnet"

---
 netlify.toml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/netlify.toml b/netlify.toml
index 7116a0f06..6bc228c02 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -3,6 +3,9 @@
   to = "/"
   status = 200
 
+[context.environment]
+  NETWORK = "testnet"
+
 [build]
   publish = "dist/spa"
   command = "quasar build"

From a4c262656097ad72fc13a0fa4706d6c63237825c Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 18 Sep 2023 17:54:16 -0300
Subject: [PATCH 241/268] addressing feedback (not complete)

---
 src/antelope/stores/rex.ts                       | 11 ++++++-----
 src/antelope/stores/utils/index.ts               | 10 +++++-----
 src/antelope/types/EvmRexDeposit.ts              |  4 ++++
 src/antelope/wallets/authenticators/OreIdAuth.ts |  1 -
 src/pages/evm/staking/StakingTab.vue             |  6 +++++-
 src/pages/evm/staking/UnstakingTab.vue           |  9 +++++++--
 src/pages/evm/staking/WithdrawRaw.vue            |  9 +++------
 src/pages/evm/staking/WithdrawTab.vue            | 14 +++-----------
 src/pages/evm/wallet/WalletBalanceRow.vue        |  6 ++----
 9 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index a1f865d71..833489e3d 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -195,7 +195,7 @@ export const useRexStore = defineStore(store_name, {
         },
         // transactions ----------
         /**
-         * This methos sould be called by any transaction performed by this store. It subscribes to the transaction
+         * This method should be called by any transaction performed by this store. It subscribes to the transaction
          * receipt and updates the balance and rex status for the account if the transaction is successful.
          * @param account account performing the transaction
          * @param response the transaction response holding the hash
@@ -292,11 +292,12 @@ export const useRexStore = defineStore(store_name, {
             (this.__rexData[label] as EvmRexModel).withdrawable = withdrawable;
         },
         setDeposits(label: string, deposits: EvmRexDeposit[]) {
-            const copia = deposits.slice();
-            copia.sort((a, b) => a.until.toNumber() - b.until.toNumber());
-            this.trace('setDeposits', label, ... copia.map(d => parseFloat(ethers.utils.formatUnits(d.amount, this.getStakingDecimals()))));
+            // we need to clone the deposits parameter because it is read-only and we can't directly sort it.
+            const editable_clone = deposits.slice();
+            editable_clone.sort((a, b) => a.until.toNumber() - b.until.toNumber());
+            this.trace('setDeposits', label, ... editable_clone.map(d => parseFloat(ethers.utils.formatUnits(d.amount, this.getStakingDecimals()))));
             this.__rexData[label] = this.__rexData[label] || {};
-            (this.__rexData[label] as EvmRexModel).deposits = copia;
+            (this.__rexData[label] as EvmRexModel).deposits = editable_clone;
         },
         setBalance(label: string, balance: ethers.BigNumber) {
             const num = parseFloat(ethers.utils.formatUnits(balance, this.getStakingDecimals()));
diff --git a/src/antelope/stores/utils/index.ts b/src/antelope/stores/utils/index.ts
index 1b4c3d218..2d46f8703 100644
--- a/src/antelope/stores/utils/index.ts
+++ b/src/antelope/stores/utils/index.ts
@@ -216,11 +216,11 @@ export function getLongDate(epoch: number): string {
 
 
 /**
- * TODO: write this doc
- *
- * @param epoch
- *
- * @return string
+ * Given a unix timestamp, returns string with the date in a given format showing UTC offset optionally.
+ * @param epoch seconds since epoch
+ * @param timeFormat a string containing the format of the date to be returned (based on date-fns format)
+ * @param showUtc whether to show the UTC offset
+ * @returns {string} the formatted date
  */
 export function getFormatedDate(epoch: number, timeFormat = 'MMM d, yyyy hh:mm:ss a', showUtc = false): string {
     const offset = getFormattedUtcOffset(new Date(epoch));
diff --git a/src/antelope/types/EvmRexDeposit.ts b/src/antelope/types/EvmRexDeposit.ts
index 5f0a4b849..a0f79a8a6 100644
--- a/src/antelope/types/EvmRexDeposit.ts
+++ b/src/antelope/types/EvmRexDeposit.ts
@@ -1,6 +1,10 @@
 import { ethers } from 'ethers';
 
 export interface EvmRexDeposit {
+    // amount of REX tokens deposited (expressed in system tokens - e.g. TLOS)
     amount: ethers.BigNumber;
+
+    // a big number representing the time (seconds since epoch) at which the deposit will be available for withdrawal
+    // data.until.toNumber() should be salfe to use as a timestamp
     until: ethers.BigNumber;
 }
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index 5f5959918..b3b0d0332 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -214,7 +214,6 @@ export class OreIdAuth extends EVMAuthenticator {
         this.checkIntegrity();
 
         // prepare variables
-        // const from = this.userChainAccount?.chainAccount as addressString;
         const from = this.getAccountAddress();
         const value = amount.toHexString();
         const abi = erc20Abi;
diff --git a/src/pages/evm/staking/StakingTab.vue b/src/pages/evm/staking/StakingTab.vue
index d598e2a62..2b90d6b8c 100644
--- a/src/pages/evm/staking/StakingTab.vue
+++ b/src/pages/evm/staking/StakingTab.vue
@@ -96,9 +96,13 @@ const availableTostake = computed(() => {
     }
     return available;
 });
+
+
 const formIsValid = computed(() =>
+    !ctaIsLoading.value &&
     !outputModelValue.value.isZero() &&
-    inputModelValue.value.lt(availableTostake.value),
+    inputModelValue.value.gt(0) &&
+    inputModelValue.value.lte(availableTostake.value),
 );
 const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('stakeEVMSystemTokens'));
 
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index 8bcdffd26..e4763883f 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -41,6 +41,8 @@ const stakedTokenDecimals = stakedToken.decimals;
 // data
 const oneEth = ethers.BigNumber.from('1'.concat('0'.repeat(systemTokenDecimals)));
 const inputModelValue = ref(ethers.constants.Zero);
+
+// computed
 const unstakedRatio = computed(() => chainStore.getUnstakedRatio(label));
 const outputModelValue = computed(() => {
     if (unstakedRatio.value.isZero()) {
@@ -49,7 +51,7 @@ const outputModelValue = computed(() => {
     const output = inputModelValue.value.mul(unstakedRatio.value).div(oneEth);
     return output;
 });
-// computed
+
 const fiatLocale = computed(() => userStore.fiatLocale);
 const fiatCurrency = computed(() => userStore.fiatCurrency);
 const systemTokenBalanceInfo = computed(() => balanceStore.currentBalances.filter(
@@ -83,9 +85,12 @@ const sidebarContent = computed(() => {
     };
 });
 const availableToUnstake = computed(() => stakedTokenBalance.value);
+
 const formIsValid = computed(() =>
+    !ctaIsLoading.value &&
     !outputModelValue.value.isZero() &&
-    inputModelValue.value.lt(availableToUnstake.value),
+    inputModelValue.value.gt(0) &&
+    inputModelValue.value.lte(availableToUnstake.value),
 );
 const ctaIsLoading = computed(() => ant.stores.feedback.isLoading('unstakeEVMSystemTokens'));
 
diff --git a/src/pages/evm/staking/WithdrawRaw.vue b/src/pages/evm/staking/WithdrawRaw.vue
index f4300fd65..a390729d0 100644
--- a/src/pages/evm/staking/WithdrawRaw.vue
+++ b/src/pages/evm/staking/WithdrawRaw.vue
@@ -3,7 +3,7 @@ import { defineComponent, PropType } from 'vue';
 
 import InlineSvg from 'vue-inline-svg';
 
-import { CURRENT_CONTEXT, useChainStore, useEVMStore, useRexStore, useUserStore } from 'src/antelope';
+import { CURRENT_CONTEXT, useChainStore, useUserStore } from 'src/antelope';
 
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { EvmRexDeposit } from 'src/antelope/types';
@@ -12,7 +12,6 @@ import { prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import { ethers } from 'ethers';
 import { getFormatedDate } from 'src/antelope/stores/utils';
 
-const evmStore = useEVMStore();
 const userStore = useUserStore();
 const chainStore = useChainStore();
 const { fiatLocale, fiatCurrency } = userStore;
@@ -99,11 +98,9 @@ export default defineComponent({
             }
 
             if (this.truncateSecondaryValue) {
-                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, true).concat(` ${this.token.symbol}`);
+                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, true, this.token.symbol);
             } else {
-                const formatted = prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale);
-
-                return `${formatted} ${this.token.symbol}`;
+                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, false, this.token.symbol);
             }
         },
     },
diff --git a/src/pages/evm/staking/WithdrawTab.vue b/src/pages/evm/staking/WithdrawTab.vue
index 4219d2924..c3a9528cf 100644
--- a/src/pages/evm/staking/WithdrawTab.vue
+++ b/src/pages/evm/staking/WithdrawTab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ethers } from 'ethers';
 
@@ -7,11 +7,9 @@ import {
     CURRENT_CONTEXT,
     getAntelope,
     useAccountStore,
-    useBalancesStore,
     useChainStore,
     useFeedbackStore,
     useRexStore,
-    useUserStore,
 } from 'src/antelope';
 
 import WithdrawRaw from 'src/pages/evm/staking/WithdrawRaw.vue';
@@ -24,8 +22,6 @@ const uiDecimals = 2;
 const ant = getAntelope();
 const chainStore = useChainStore();
 const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
-const userStore = useUserStore();
-const balanceStore = useBalancesStore();
 const accountStore = useAccountStore();
 const rexStore = useRexStore();
 const feed = useFeedbackStore();
@@ -33,9 +29,6 @@ const feed = useFeedbackStore();
 const systemToken = chainSettings.getSystemToken();
 const systemTokenSymbol = systemToken.symbol;
 const systemTokenDecimals = systemToken.decimals;
-const stakedToken = chainSettings.getStakedSystemToken();
-const stakedTokenSymbol = stakedToken.symbol;
-const stakedTokenDecimals = stakedToken.decimals;
 
 const loading = computed(() => feed.isLoading('withdrawEVMSystemTokens'));
 const allWithdrawals = computed(() => rexStore.getEvmRexData(CURRENT_CONTEXT)?.deposits ?? []);
@@ -43,8 +36,8 @@ const allWithdrawals = computed(() => rexStore.getEvmRexData(CURRENT_CONTEXT)?.d
 // prettyPrintToken(unstakingBalanceBn.value, systemToken.symbol)
 const withdrawableBalanceBn = computed(() => useRexStore().getRexData(CURRENT_CONTEXT)?.withdrawable ?? ethers.constants.Zero);
 
-// enable only if withdrawableBalanceBn > 0
-const withdrawEnabled = computed(() => withdrawableBalanceBn.value?.gt(0) ?? false);
+// enable only if withdrawableBalanceBn > 0 and not loading
+const withdrawEnabled = computed(() => withdrawableBalanceBn.value.gt(ethers.constants.Zero) && !loading.value);
 
 // hadle withdraw button click
 const handleWithdrawClick = async () => {
@@ -87,7 +80,6 @@ const handleWithdrawClick = async () => {
 
 // handler of update-rex-data event
 const updateRexData = () => {
-    console.log('WithdrawTab.updateRexData');
     useRexStore().updateRexData(CURRENT_CONTEXT);
 };
 
diff --git a/src/pages/evm/wallet/WalletBalanceRow.vue b/src/pages/evm/wallet/WalletBalanceRow.vue
index 825997da3..f312aacbb 100644
--- a/src/pages/evm/wallet/WalletBalanceRow.vue
+++ b/src/pages/evm/wallet/WalletBalanceRow.vue
@@ -121,11 +121,9 @@ export default defineComponent({
             }
 
             if (this.truncateSecondaryValue) {
-                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, true).concat(` ${this.token.symbol}`);
+                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, true, this.token.symbol);
             } else {
-                const formatted = prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale);
-
-                return `${formatted} ${this.token.symbol}`;
+                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, false, this.token.symbol);
             }
         },
         tooltipWarningText(): string[] | undefined {

From 18ef8cb27265c88782e7440140babd4443dd1106 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 18 Sep 2023 19:44:01 -0300
Subject: [PATCH 242/268] restoring previous prettySecondaryAmount
 implementation

---
 src/pages/evm/staking/WithdrawRaw.vue     | 5 +++--
 src/pages/evm/wallet/WalletBalanceRow.vue | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/evm/staking/WithdrawRaw.vue b/src/pages/evm/staking/WithdrawRaw.vue
index a390729d0..ebc3632c7 100644
--- a/src/pages/evm/staking/WithdrawRaw.vue
+++ b/src/pages/evm/staking/WithdrawRaw.vue
@@ -98,9 +98,10 @@ export default defineComponent({
             }
 
             if (this.truncateSecondaryValue) {
-                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, true, this.token.symbol);
+                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, true).concat(` ${this.token.symbol}`);
             } else {
-                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, false, this.token.symbol);
+                const formatted = prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale);
+                return `${formatted} ${this.token.symbol}`;
             }
         },
     },
diff --git a/src/pages/evm/wallet/WalletBalanceRow.vue b/src/pages/evm/wallet/WalletBalanceRow.vue
index f312aacbb..c739472e5 100644
--- a/src/pages/evm/wallet/WalletBalanceRow.vue
+++ b/src/pages/evm/wallet/WalletBalanceRow.vue
@@ -121,9 +121,10 @@ export default defineComponent({
             }
 
             if (this.truncateSecondaryValue) {
-                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, true, this.token.symbol);
+                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, true).concat(` ${this.token.symbol}`);
             } else {
-                return prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale, false, this.token.symbol);
+                const formatted = prettyPrintCurrency(+this.secondaryAmount, 4, fiatLocale);
+                return `${formatted} ${this.token.symbol}`;
             }
         },
         tooltipWarningText(): string[] | undefined {

From e3b7ca649c3936ebb6df22f82d6f2900e25cfb74 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 19 Sep 2023 00:06:50 -0300
Subject: [PATCH 243/268] addressing feddback complete

---
 src/antelope/chains/EVMChainSettings.ts       |  5 +++++
 src/antelope/chains/NativeChainSettings.ts    |  5 +++++
 .../chains/evm/telos-evm-testnet/index.ts     |  4 ++++
 src/antelope/chains/native/jungle/index.ts    |  4 ++++
 .../chains/native/telos-testnet/index.ts      |  4 ++++
 src/antelope/stores/rex.ts                    |  8 ++++----
 src/antelope/types/ChainSettings.ts           |  1 +
 src/i18n/en-us/index.js                       | 10 ++++++++--
 src/pages/evm/staking/StakingPageHeader.vue   |  2 +-
 src/pages/evm/staking/UnstakingTab.vue        | 19 +++++++++++++------
 src/pages/evm/staking/WithdrawRaw.vue         | 14 ++++++++++----
 src/pages/evm/staking/WithdrawTab.vue         |  7 +++++--
 12 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 74974fd49..0e3aefb47 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -203,6 +203,11 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return false;
     }
 
+    // only testnet chains should override this
+    isTestnet() {
+        return false;
+    }
+
     getNetwork(): string {
         return this.network;
     }
diff --git a/src/antelope/chains/NativeChainSettings.ts b/src/antelope/chains/NativeChainSettings.ts
index 285c7d942..5d60c028c 100644
--- a/src/antelope/chains/NativeChainSettings.ts
+++ b/src/antelope/chains/NativeChainSettings.ts
@@ -117,6 +117,11 @@ export default abstract class NativeChainSettings implements ChainSettings {
         return true;
     }
 
+    // only testnet chains should override this
+    isTestnet() {
+        return false;
+    }
+
     getNetwork(): string {
         return this.network;
     }
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index c5a1c48c0..b3a311889 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -62,6 +62,10 @@ const CONTRACTS_BUCKET = 'https://verified-evm-contracts-testnet.s3.amazonaws.co
 declare const fathom: { trackGoal: (eventId: string, value: 0) => void };
 
 export default class TelosEVMTestnet extends EVMChainSettings {
+    isTestnet() {
+        return true;
+    }
+
     getNetwork(): string {
         return NETWORK;
     }
diff --git a/src/antelope/chains/native/jungle/index.ts b/src/antelope/chains/native/jungle/index.ts
index 77917984e..fa2bd8314 100644
--- a/src/antelope/chains/native/jungle/index.ts
+++ b/src/antelope/chains/native/jungle/index.ts
@@ -27,6 +27,10 @@ const DISPLAY_MAP = true;
 const THEME = {};
 
 export default class TelosTestnet extends NativeChainSettings {
+    isTestnet() {
+        return true;
+    }
+
     getNetwork(): string {
         return NETWORK;
     }
diff --git a/src/antelope/chains/native/telos-testnet/index.ts b/src/antelope/chains/native/telos-testnet/index.ts
index dd359ae9c..ae520eaa5 100644
--- a/src/antelope/chains/native/telos-testnet/index.ts
+++ b/src/antelope/chains/native/telos-testnet/index.ts
@@ -46,6 +46,10 @@ const THEME = {
 };
 
 export default class TelosTestnet extends NativeChainSettings {
+    isTestnet() {
+        return true;
+    }
+
     getNetwork(): string {
         return NETWORK;
     }
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 833489e3d..349c27646 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -229,7 +229,7 @@ export const useRexStore = defineStore(store_name, {
                 return await authenticator.stakeSystemTokens(amount)
                     .then(r => this.subscribeForTransactionReceipt(account, r as TransactionResponse));
             } catch (error) {
-                const trxError = getAntelope().config.wrapError('antelope.evm.error_wrap_failed', error);
+                const trxError = getAntelope().config.wrapError('antelope.evm.error_stakes_failed', error);
                 getAntelope().config.transactionErrorHandler(trxError, funcname);
                 throw trxError;
             } finally {
@@ -253,7 +253,7 @@ export const useRexStore = defineStore(store_name, {
                 return await authenticator.unstakeSystemTokens(amount)
                     .then(r => this.subscribeForTransactionReceipt(account, r as TransactionResponse));
             } catch (error) {
-                const trxError = getAntelope().config.wrapError('antelope.evm.error_wrap_failed', error);
+                const trxError = getAntelope().config.wrapError('antelope.evm.error_unstakes_failed', error);
                 getAntelope().config.transactionErrorHandler(trxError, funcname);
                 throw trxError;
             } finally {
@@ -277,7 +277,7 @@ export const useRexStore = defineStore(store_name, {
                 return await authenticator.withdrawUnstakedTokens()
                     .then(r => this.subscribeForTransactionReceipt(account, r as TransactionResponse));
             } catch (error) {
-                const trxError = getAntelope().config.wrapError('antelope.evm.error_wrap_failed', error);
+                const trxError = getAntelope().config.wrapError('antelope.evm.error_withdraw_failed', error);
                 getAntelope().config.transactionErrorHandler(trxError, funcname);
                 throw trxError;
             } finally {
@@ -293,7 +293,7 @@ export const useRexStore = defineStore(store_name, {
         },
         setDeposits(label: string, deposits: EvmRexDeposit[]) {
             // we need to clone the deposits parameter because it is read-only and we can't directly sort it.
-            const editable_clone = deposits.slice();
+            const editable_clone = (deposits || []).slice();
             editable_clone.sort((a, b) => a.until.toNumber() - b.until.toNumber());
             this.trace('setDeposits', label, ... editable_clone.map(d => parseFloat(ethers.utils.formatUnits(d.amount, this.getStakingDecimals()))));
             this.__rexData[label] = this.__rexData[label] || {};
diff --git a/src/antelope/types/ChainSettings.ts b/src/antelope/types/ChainSettings.ts
index d21f60f07..c2250bb33 100644
--- a/src/antelope/types/ChainSettings.ts
+++ b/src/antelope/types/ChainSettings.ts
@@ -4,6 +4,7 @@ import { IndexerTransactionsFilter, NFTClass, PriceChartData, TokenClass } from
 export interface ChainSettings {
     init(): Promise<void>;
     isNative(): boolean;
+    isTestnet(): boolean;
     getNetwork(): string;
     getSystemToken(): TokenClass;
     getTokenList(): Promise<TokenClass[]>;
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index ae7ed02da..78578dfb4 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -218,7 +218,8 @@ export default {
         tvl_card_label: 'TVL',
         tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
-        unstaking_period: '10 days',
+        unstaking_period_testnet: '10 minutes',
+        unstaking_period_mainnet: '10 days',
         stake_input_label: 'Staking Amount',
         stake_output_label: 'Staked Amount',
         stake: 'Stake',
@@ -235,12 +236,14 @@ export default {
         unstake_sidebar_title: 'Unstaking {symbol}?',
         unstake_button_label: 'Unstake {stakedSymbol} to {systemSymbol}',
         unstake_sidebar_content_fragment_1: 'Unstaked TLOS will',
-        unstake_sidebar_content_fragment_2_bold: ' remain locked for a period of 10 days, ',
+        unstake_sidebar_content_fragment_2_bold_testnet: ' remain locked for a period of 10 minutes, ',
+        unstake_sidebar_content_fragment_2_bold_mainnet: ' remain locked for a period of 10 days, ',
         unstake_sidebar_content_fragment_3: 'after which it can be withdrawn to your account from the Withdraw tab.',
         withdraw_button_disabled: 'Nothing to withdraw',
         withdraw_button_enabled: 'Withdraw {amount} {symbol}',
         withdrawal_available: 'Available for withdrawal',
         unstaking_pending_time: 'Unstaking for {time}',
+        withdrawal_updatng: 'updating...',
         withdrawal_date: 'Withdrawal it on {date}',
     },
     notification:{
@@ -535,6 +538,9 @@ export default {
             error_unwrap_not_supported_on_native: 'Unwrap is not supported on native chain',
             error_wrap_failed: 'An unknown error occurred when wrapping tokens',
             error_unwrap_failed: 'An unknown error occurred when unwrapping tokens',
+            error_stake_failed: 'An unknown error occurred when staking tokens',
+            error_unstakes_failed: 'An unknown error occurred when unstaking tokens',
+            error_withdraw_failed: 'An unknown error occurred when withdrawing tokens',
         },
         history: {
             error_fetching_transactions: 'Unexpected error fetching transactions. Please refresh the page to try again.',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 0ca77210a..393b852c9 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -112,7 +112,7 @@ const apyPrittyPrint = computed(() => {
     }
 });
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
-const unlockPeriod = ref($t('evm_stake.unstaking_period'));
+const unlockPeriod = ref($t(`evm_stake.unstaking_period_${chainSettings.isTestnet() ? 'testnet' : 'mainnet'}`));
 
 const tvlAmountBn = computed(() => {
     const totalStaking = useRexStore().getRexData(label)?.totalStaking;
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index 7f72f75ec..326335659 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -63,22 +63,29 @@ const stakedTokenBalanceInfo = computed(() => balanceStore.currentBalances.filte
 );
 const stakedTokenBalance = computed(() => stakedTokenBalanceInfo.value?.amount ?? ethers.constants.Zero);
 const sidebarContent = computed(() => {
-    const header = $t('evm_stake.stake_sidebar_title', { symbol: systemTokenSymbol });
+    const header = $t('evm_stake.unstake_sidebar_title', { symbol: systemTokenSymbol });
     const content = [{
         text: $t(
-            'evm_stake.unstake_sidebar_content_fragment_1',
-            { systemSymbol: systemTokenSymbol },
+            'evm_stake.stake_sidebar_content_fragment_1',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+        ),
+    }, {
+        text: $t('evm_stake.stake_sidebar_content_fragment_2_bold'),
+        bold: true,
+    }, {
+        text: $t(
+            'evm_stake.stake_sidebar_content_fragment_3',
+            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
         ),
     }, {
-        text: $t('evm_stake.unstake_sidebar_content_fragment_2_bold'),
+        text: $t('evm_stake.stake_sidebar_content_fragment_4_bold'),
         bold: true,
     }, {
         text: $t(
-            'evm_stake.unstake_sidebar_content_fragment_3',
+            'evm_stake.stake_sidebar_content_fragment_5',
             { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
         ),
     }];
-
     return {
         header,
         content,
diff --git a/src/pages/evm/staking/WithdrawRaw.vue b/src/pages/evm/staking/WithdrawRaw.vue
index ebc3632c7..2535bcf5e 100644
--- a/src/pages/evm/staking/WithdrawRaw.vue
+++ b/src/pages/evm/staking/WithdrawRaw.vue
@@ -136,11 +136,9 @@ export default defineComponent({
             clearInterval(this.timer);
             this.timer = setInterval(() => {
                 this.updatePendingTime();
-                if (this.pendingTime === '') {
-                    // final case
+                if (this.isWithdrawable) {
                     this.$emit('update-rex-data');
                     clearInterval(this.timer);
-                    console.log('clear interval');
                 }
             }, 1000);
         },
@@ -192,7 +190,15 @@ export default defineComponent({
         <div class="c-stake-withdrawal-row__left-content">
             <div>
                 <span class="c-stake-withdrawal-row__withdrawal-status">
-                    {{ isWithdrawable ? $t('evm_stake.withdrawal_available') : $t('evm_stake.unstaking_pending_time', { time: pendingTime }) }}
+                    <template v-if="isWithdrawable">
+                        {{ $t('evm_stake.withdrawal_available') }}
+                    </template>
+                    <template v-else-if="pendingTime !== ''">
+                        {{ $t('evm_stake.unstaking_pending_time', { time: pendingTime }) }}
+                    </template>
+                    <template v-else>
+                        {{ $t('evm_stake.withdrawal_updatng') }}
+                    </template>
                 </span>
             </div>
             <div>
diff --git a/src/pages/evm/staking/WithdrawTab.vue b/src/pages/evm/staking/WithdrawTab.vue
index c3a9528cf..b94bc33ce 100644
--- a/src/pages/evm/staking/WithdrawTab.vue
+++ b/src/pages/evm/staking/WithdrawTab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ethers } from 'ethers';
 
@@ -25,6 +25,7 @@ const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
 const accountStore = useAccountStore();
 const rexStore = useRexStore();
 const feed = useFeedbackStore();
+const waitingForResult = ref(false);
 
 const systemToken = chainSettings.getSystemToken();
 const systemTokenSymbol = systemToken.symbol;
@@ -37,7 +38,7 @@ const allWithdrawals = computed(() => rexStore.getEvmRexData(CURRENT_CONTEXT)?.d
 const withdrawableBalanceBn = computed(() => useRexStore().getRexData(CURRENT_CONTEXT)?.withdrawable ?? ethers.constants.Zero);
 
 // enable only if withdrawableBalanceBn > 0 and not loading
-const withdrawEnabled = computed(() => withdrawableBalanceBn.value.gt(ethers.constants.Zero) && !loading.value);
+const withdrawEnabled = computed(() => !waitingForResult.value && withdrawableBalanceBn.value.gt(ethers.constants.Zero) && !loading.value);
 
 // hadle withdraw button click
 const handleWithdrawClick = async () => {
@@ -57,6 +58,7 @@ const handleWithdrawClick = async () => {
     }
 
     try {
+        waitingForResult.value = true;
         const tx = await useRexStore().withdrawEVMSystemTokens(CURRENT_CONTEXT, withdrawableBalanceBn.value);
         const formattedAmount = formatWei(withdrawableBalanceBn.value, systemTokenDecimals, 4);
 
@@ -68,6 +70,7 @@ const handleWithdrawClick = async () => {
             ant.config.notifySuccessfulTrxHandler(
                 `${chainSettings.getExplorerUrl()}/tx/${tx.hash}`,
             );
+            waitingForResult.value = false;
         }).catch((err) => {
             console.error(err);
         }).finally(() => {

From db154418022c259c9ddab3e85dc2fd021e71a95a Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 19 Sep 2023 00:28:07 -0300
Subject: [PATCH 244/268] fixing sidebar text

---
 src/pages/evm/staking/UnstakingTab.vue | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index 326335659..a6bb0705b 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -66,23 +66,15 @@ const sidebarContent = computed(() => {
     const header = $t('evm_stake.unstake_sidebar_title', { symbol: systemTokenSymbol });
     const content = [{
         text: $t(
-            'evm_stake.stake_sidebar_content_fragment_1',
-            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
-        ),
-    }, {
-        text: $t('evm_stake.stake_sidebar_content_fragment_2_bold'),
-        bold: true,
-    }, {
-        text: $t(
-            'evm_stake.stake_sidebar_content_fragment_3',
-            { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
+            'evm_stake.unstake_sidebar_content_fragment_1',
+            { systemSymbol: systemTokenSymbol },
         ),
     }, {
-        text: $t('evm_stake.stake_sidebar_content_fragment_4_bold'),
+        text: $t(`evm_stake.unstake_sidebar_content_fragment_2_bold_${chainSettings.isTestnet() ? 'testnet' : 'mainnet'}`),
         bold: true,
     }, {
         text: $t(
-            'evm_stake.stake_sidebar_content_fragment_5',
+            'evm_stake.unstake_sidebar_content_fragment_3',
             { systemSymbol: systemTokenSymbol, stakedSymbol: stakedTokenSymbol },
         ),
     }];

From fead4ac0ea32845e1019a09b1a812aa201457aa1 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Tue, 19 Sep 2023 16:16:49 -0400
Subject: [PATCH 245/268] pr feedback - cleanup

---
 src/antelope/stores/history.ts | 20 +++++---------------
 src/antelope/types/NFTClass.ts |  9 +++++----
 2 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 686eb7d47..d1ed58856 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -333,16 +333,6 @@ export const useHistoryStore = defineStore(store_name, {
 
                         nftDetailList.forEach((nftDetails, index) => {
                             if (nftDetails) {
-                                let nftMediaType: 'image' | 'video' | 'audio' | 'unknown' = 'unknown';
-
-                                if (nftDetails.audioSrc) {
-                                    nftMediaType = 'audio';
-                                } else if (nftDetails.videoSrc) {
-                                    nftMediaType = 'video';
-                                } else if (nftDetails.imageSrcFull) {
-                                    nftMediaType = 'image';
-                                }
-
                                 const transferInfo = nftTransfersInTx[index];
                                 const shapedNftTransfer = {
                                     quantity: +(transferInfo.amount || 1),
@@ -350,7 +340,7 @@ export const useHistoryStore = defineStore(store_name, {
                                     tokenName: nftDetails.name,
                                     collectionAddress: transferInfo.contract,
                                     collectionName: nftDetails.contractPrettyName,
-                                    type: nftMediaType,
+                                    type: nftDetails.item.type,
                                     nftInterface: transferInfo.type.toUpperCase() as NftTokenInterface,
                                     imgSrc: nftDetails.imageSrcFull,
                                     videoSrc: nftDetails.videoSrc,
@@ -489,21 +479,21 @@ export const useHistoryStore = defineStore(store_name, {
 
 const historyInitialState: HistoryState = {
     __evm_transactions: {
-        current: {
+        [CURRENT_CONTEXT]: {
             transactions: [],
         },
     },
     __total_evm_transaction_count: {
-        current: 0,
+        [CURRENT_CONTEXT]: 0,
     },
     __evm_filter: {
         address: '',
     },
     __shaped_evm_transaction_rows: {
-        current: [],
+        [CURRENT_CONTEXT]: [],
     },
     __evm_transactions_pagination_data: {},
     __evm_nft_transfers: {
-        current: new Map(),
+        [CURRENT_CONTEXT]: new Map(),
     },
 };
diff --git a/src/antelope/types/NFTClass.ts b/src/antelope/types/NFTClass.ts
index ab46e9e9b..fc8dd21a0 100644
--- a/src/antelope/types/NFTClass.ts
+++ b/src/antelope/types/NFTClass.ts
@@ -27,11 +27,12 @@ export interface ShapedNFT {
     videoSrc?: string;
 }
 
-export const NFTSourceTypes = {
+export type NftSourceType = 'image' | 'video' | 'audio' | 'unknown';
+export const NFTSourceTypes: Record<string, NftSourceType> = {
     IMAGE: 'image',
     VIDEO: 'video',
     AUDIO: 'audio',
-    NONE: 'none',
+    UNKNOWN: 'unknown',
 };
 
 export type NftTokenInterface = 'ERC721' | 'ERC1155';
@@ -59,7 +60,7 @@ export class NFTItemClass {
     indexer: IndexerNftItemResult;
     ready = true;
     preview: string;
-    type: string;
+    type: NftSourceType;
     source: string | undefined;
 
     constructor(
@@ -69,7 +70,7 @@ export class NFTItemClass {
         this.indexer = item;
         const { preview, type, source } = this.extractMetadata();
         this.preview = preview;
-        this.type = type;
+        this.type = type as NftSourceType;
         this.source = source;
     }
 

From 1e681cff330b2bc69c9be12c8b44f142f61bfa8b Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 19 Sep 2023 17:30:31 -0300
Subject: [PATCH 246/268] changing the source of the unstaking period time

---
 src/antelope/stores/rex.ts                  | 36 ++++++++++++++--
 src/antelope/stores/utils/date-utils.ts     | 48 +++++++++++++++++++++
 src/i18n/en-us/index.js                     |  5 +--
 src/pages/evm/staking/StakingPageHeader.vue |  6 ++-
 src/pages/evm/staking/UnstakingTab.vue      |  5 ++-
 5 files changed, 89 insertions(+), 11 deletions(-)

diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 349c27646..131366e71 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -20,12 +20,14 @@ import { CURRENT_CONTEXT, getAntelope, useBalancesStore, useChainStore, useEVMSt
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION } from 'src/antelope/stores/utils';
 import { subscribeForTransactionReceipt } from 'src/antelope/stores/utils/trx-utils';
+import { formatUnstakePeriod } from 'src/antelope/stores/utils/date-utils';
 
 
 export interface RexModel {
     withdrawable: ethers.BigNumber;
     balance: ethers.BigNumber;
     totalStaking: ethers.BigNumber;
+    period: number; // unstake period in seconds
 }
 
 export interface NativeRexModel extends RexModel {
@@ -52,6 +54,14 @@ export const useRexStore = defineStore(store_name, {
         getRexData: state => (label: string) => state.__rexData[label] ?? null,
         getEvmRexData: state => (label: string) => state.__rexData[label] as EvmRexModel,
         getNativeRexData: state => (label: string) => state.__rexData[label] as NativeRexModel,
+        getUnstakingPeriodString: state => (label: string) =>
+            formatUnstakePeriod(
+                // period for the label network
+                state.__rexData[label]?.period ?? null,
+                // translation function only takes the key name, without the path and adds the prefix
+                (key:string) => getAntelope().config.localizationHandler(`antelope.words.${key}`),
+            ),
+
     },
     actions: {
         trace: createTraceFunction(store_name),
@@ -117,6 +127,18 @@ export const useRexStore = defineStore(store_name, {
             const totalStaking = await contract.totalAssets();
             this.setTotalStaking(label, totalStaking);
         },
+
+        /**
+         * This method queries the unstaking period for a given chain and maintains it in the store.
+         * @param label identifies the context (network on this case) for the data
+         */
+        async updateUnstakingPeriod(label: string) {
+            this.trace('updateUnstakingPeriod', label);
+            const contract = await this.getEscrowContractInstance(label);
+            const period = await contract.lockDuration();
+            this.setUnstakingPeriod(label, period.toNumber());
+        },
+
         /**
          * This method should be called to update the REX data for a given context.
          * @param label identifies the context (account and network) for the data
@@ -139,10 +161,11 @@ export const useRexStore = defineStore(store_name, {
             useFeedbackStore().setLoading('updateRexDataForAccount');
             try {
                 await Promise.all([
-                    this.updateWithdrawable(label),  // account's data
-                    this.updateDeposits(label),      // account's data
-                    this.updateBalance(label),       // account's data
-                    this.updateTotalStaking(label),  // system's data
+                    this.updateWithdrawable(label),    // account's data
+                    this.updateDeposits(label),        // account's data
+                    this.updateBalance(label),         // account's data
+                    this.updateTotalStaking(label),    // system's data
+                    this.updateUnstakingPeriod(label), // system's data
                 ]);
             } catch (error) {
                 console.error(error);
@@ -311,6 +334,11 @@ export const useRexStore = defineStore(store_name, {
             this.__rexData[label] = this.__rexData[label] || {};
             (this.__rexData[label] as EvmRexModel).totalStaking = totalStaking;
         },
+        setUnstakingPeriod(label: string, period: number) {
+            this.trace('setUnstakingPeriod', label, period);
+            this.__rexData[label] = this.__rexData[label] || {};
+            (this.__rexData[label] as EvmRexModel).period = period;
+        },
     },
 });
 
diff --git a/src/antelope/stores/utils/date-utils.ts b/src/antelope/stores/utils/date-utils.ts
index d4c809a17..9162c0494 100644
--- a/src/antelope/stores/utils/date-utils.ts
+++ b/src/antelope/stores/utils/date-utils.ts
@@ -1,3 +1,16 @@
+/**
+ * Useful date-related constants
+ */
+export const HOUR_SECONDS = 60 * 60;
+export const DAY_SECONDS = 24 * HOUR_SECONDS;
+
+
+/**
+ * Returns true if the given epochMs is less than the given number of minutes ago
+ * @param epochMs seconds since epoch representing the date to check
+ * @param minutes number of minutes to check against
+ * @returns {boolean} true if the given epochMs is less than the given number of minutes ago
+ */
 export function dateIsWithinXMinutes(epochMs: number, minutes: number) {
     if (epochMs <= 0) {
         throw new Error('epochMs must be greater than 0');
@@ -10,3 +23,38 @@ export function dateIsWithinXMinutes(epochMs: number, minutes: number) {
     // return true if the date is within the defined timeframe
     return new Date(epochMs) > xMinsAgo;
 }
+
+
+/**
+ * Translates a number of seconds to a natural language time period using the given translation function.
+ *
+ * @param {number|null} seconds number of seconds since epoch representing the date to check
+ * @param {function} $t translation function. Should accept a string (just the keyname without a path) and return a translated string
+ * @returns {string} plain english time period
+ */
+export function formatUnstakePeriod(seconds: number|null, $t: (key:string) => string) {
+    if (seconds === null) {
+        return '--';
+    }
+
+    let quantity;
+    let unit;
+
+    if (seconds < HOUR_SECONDS) {
+        quantity = seconds / 60;
+        unit = $t('minutes');
+    } else if (seconds < DAY_SECONDS) {
+        quantity = seconds / HOUR_SECONDS;
+        unit = $t('hours');
+    } else {
+        quantity = seconds / DAY_SECONDS;
+        unit = $t('days');
+    }
+
+    if (!Number.isInteger(quantity)) {
+        quantity = quantity.toFixed(1);
+    }
+
+    return `${quantity} ${unit}`;
+}
+
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 78578dfb4..569b6ad89 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -218,8 +218,6 @@ export default {
         tvl_card_label: 'TVL',
         tvl_card_tooltip: 'Total Value Locked (TVL) is the current value, in {systemSymbol}, of all assets held in the {stakedSymbol} (Staked {systemSymbol})\n' +
         'smart contract, i.e. the sum of all {systemSymbol} staked on the {evmNetworkName} at this moment.',
-        unstaking_period_testnet: '10 minutes',
-        unstaking_period_mainnet: '10 days',
         stake_input_label: 'Staking Amount',
         stake_output_label: 'Staked Amount',
         stake: 'Stake',
@@ -236,8 +234,7 @@ export default {
         unstake_sidebar_title: 'Unstaking {symbol}?',
         unstake_button_label: 'Unstake {stakedSymbol} to {systemSymbol}',
         unstake_sidebar_content_fragment_1: 'Unstaked TLOS will',
-        unstake_sidebar_content_fragment_2_bold_testnet: ' remain locked for a period of 10 minutes, ',
-        unstake_sidebar_content_fragment_2_bold_mainnet: ' remain locked for a period of 10 days, ',
+        unstake_sidebar_content_fragment_2_bold: ' remain locked for a period of {period}, ',
         unstake_sidebar_content_fragment_3: 'after which it can be withdrawn to your account from the Withdraw tab.',
         withdraw_button_disabled: 'Nothing to withdraw',
         withdraw_button_enabled: 'Withdraw {amount} {symbol}',
diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index 393b852c9..b52f594f9 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { BigNumber, ethers } from 'ethers';
 
-import { useUserStore, useBalancesStore, useChainStore, useRexStore } from 'src/antelope';
+import { useUserStore, useBalancesStore, useChainStore, useRexStore, CURRENT_CONTEXT } from 'src/antelope';
 import { convertCurrency, prettyPrintCurrency } from 'src/antelope/stores/utils/currency-utils';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { WEI_PRECISION } from 'src/antelope/stores/utils';
@@ -19,6 +19,7 @@ const userStore = useUserStore();
 const balancesStore = useBalancesStore();
 const chainStore = useChainStore();
 const chainSettings = (chainStore.loggedChain.settings as EVMChainSettings);
+const rexStore = useRexStore();
 
 // computed
 const fiatLocale = computed(() => userStore.fiatLocale);
@@ -112,7 +113,8 @@ const apyPrittyPrint = computed(() => {
     }
 });
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
-const unlockPeriod = ref($t(`evm_stake.unstaking_period_${chainSettings.isTestnet() ? 'testnet' : 'mainnet'}`));
+
+const unlockPeriod = ref(rexStore.getUnstakingPeriodString(CURRENT_CONTEXT));
 
 const tvlAmountBn = computed(() => {
     const totalStaking = useRexStore().getRexData(label)?.totalStaking;
diff --git a/src/pages/evm/staking/UnstakingTab.vue b/src/pages/evm/staking/UnstakingTab.vue
index a6bb0705b..01fe00193 100644
--- a/src/pages/evm/staking/UnstakingTab.vue
+++ b/src/pages/evm/staking/UnstakingTab.vue
@@ -29,6 +29,7 @@ const chainSettings = chainStore.currentChain.settings as EVMChainSettings;
 const userStore = useUserStore();
 const balanceStore = useBalancesStore();
 const accountStore = useAccountStore();
+const rexStore = useRexStore();
 
 const systemToken = chainSettings.getSystemToken();
 const systemTokenSymbol = systemToken.symbol;
@@ -70,7 +71,9 @@ const sidebarContent = computed(() => {
             { systemSymbol: systemTokenSymbol },
         ),
     }, {
-        text: $t(`evm_stake.unstake_sidebar_content_fragment_2_bold_${chainSettings.isTestnet() ? 'testnet' : 'mainnet'}`),
+        text: $t('evm_stake.unstake_sidebar_content_fragment_2_bold', {
+            period: rexStore.getUnstakingPeriodString(CURRENT_CONTEXT),
+        }),
         bold: true,
     }, {
         text: $t(

From cf8003483a3e4b77f3e70d75387b808b08a9bb37 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 19 Sep 2023 17:50:01 -0300
Subject: [PATCH 247/268] adding loading state for unstaking period fetching

---
 src/pages/evm/staking/StakingPageHeader.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/evm/staking/StakingPageHeader.vue b/src/pages/evm/staking/StakingPageHeader.vue
index b52f594f9..3433d1c10 100644
--- a/src/pages/evm/staking/StakingPageHeader.vue
+++ b/src/pages/evm/staking/StakingPageHeader.vue
@@ -114,7 +114,8 @@ const apyPrittyPrint = computed(() => {
 });
 const apyisLoading = computed(() => apyPrittyPrint.value === '--');
 
-const unlockPeriod = ref(rexStore.getUnstakingPeriodString(CURRENT_CONTEXT));
+const unlockPeriod = computed(() => rexStore.getUnstakingPeriodString(CURRENT_CONTEXT));
+const unlockPeriodLoading = computed(() => unlockPeriod.value === '--');
 
 const tvlAmountBn = computed(() => {
     const totalStaking = useRexStore().getRexData(label)?.totalStaking;
@@ -171,6 +172,7 @@ const secondLineData = computed(() => [{
     tooltip: $t('evm_stake.unstaking_period_card_tooltip', { stakedSymbol: stakedToken.symbol, systemSymbol: systemToken.symbol }),
     secondaryText: unlockPeriod.value,
     lowContrastSecondaryText: false,
+    isSecondaryLoading: unlockPeriodLoading.value,
     useSmallBox: true,
 }, {
     label: $t('evm_stake.tvl_card_label'),
@@ -195,7 +197,7 @@ const intervalTimer = setInterval(() => {
         }
     }
     // is unstaking still loading?
-    if (isUnstakingLoading.value || isWithdrawableLoading.value) {
+    if (isUnstakingLoading.value || isWithdrawableLoading.value || unlockPeriodLoading.value) {
         // we need to update rex data
         useRexStore().updateRexData(label);
     }

From 8337b09ebaaea1896d42148d909dbb6485f4d2b5 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Wed, 20 Sep 2023 13:42:59 -0400
Subject: [PATCH 248/268] fix greymass fuel logic

---
 src/antelope/stores/account.ts    | 4 +++-
 src/antelope/types/ual-oreid.d.ts | 1 +
 src/store/account/actions.js      | 3 ++-
 3 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 src/antelope/types/ual-oreid.d.ts

diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index e486dac2d..fc2c82635 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -38,6 +38,8 @@ import { EVMAuthenticator } from 'src/antelope/wallets';
 import { truncateAddress } from 'src/antelope/stores/utils/text-utils';
 import { toRaw } from 'vue';
 import { getAddress } from 'ethers/lib/utils';
+import { OreIdAuthenticator } from 'ual-oreid';
+
 
 export interface LoginNativeActionData {
     authenticator: Authenticator,
@@ -121,7 +123,7 @@ export const useAccountStore = defineStore(store_name, {
                 const ualUsers = await authenticator.login();
                 if (ualUsers?.length) {
                     // OreId has it's own authorization service, only init fuel service for other ual users
-                    const ualUser = (ualUsers[0]).constructor.name === 'OreIdAuthenticator' ? ualUsers[0] : await initFuelUserWrapper(ualUsers[0]);
+                    const ualUser = ualUsers[0] instanceof OreIdAuthenticator ? ualUsers[0] : await initFuelUserWrapper(ualUsers[0]);
                     const permission = (ualUser as unknown as { requestPermission: string })
                         .requestPermission ?? 'active';
                     const account = await ualUser.getAccountName();
diff --git a/src/antelope/types/ual-oreid.d.ts b/src/antelope/types/ual-oreid.d.ts
new file mode 100644
index 000000000..9b60e1900
--- /dev/null
+++ b/src/antelope/types/ual-oreid.d.ts
@@ -0,0 +1 @@
+declare module 'ual-oreid';
diff --git a/src/store/account/actions.js b/src/store/account/actions.js
index 9175b6cdc..1f82ce338 100644
--- a/src/store/account/actions.js
+++ b/src/store/account/actions.js
@@ -1,5 +1,6 @@
 import BigNumber from 'bignumber.js';
 import { initFuelUserWrapper } from 'src/api/fuel';
+import { OreUser } from 'ual-oreid';
 
 export const login = async function(
     { commit, dispatch },
@@ -21,7 +22,7 @@ export const login = async function(
         const users = await authenticator.login(account);
         if (users.length) {
             // OreId has it's own authorization service, only init fuel service for other ual users
-            this.$ualUser = (users[0]).constructor.name === 'OreUser' ? users[0] : await initFuelUserWrapper(users[0]);
+            this.$ualUser = users[0] instanceof OreUser ? users[0] : await initFuelUserWrapper(users[0]);
             const accountName = await this.$ualUser.getAccountName();
             this.$type = 'ual';
             this.$idx = idx;

From 2322cc828fe13a8ed368d2950efb78bc710669d5 Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Wed, 20 Sep 2023 13:51:37 -0400
Subject: [PATCH 249/268] fix icon and wallet name

---
 src/pages/home/NativeLoginButton.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/NativeLoginButton.vue b/src/pages/home/NativeLoginButton.vue
index d93bbb94d..f3b55e50f 100644
--- a/src/pages/home/NativeLoginButton.vue
+++ b/src/pages/home/NativeLoginButton.vue
@@ -3,6 +3,9 @@
 import { CURRENT_CONTEXT, useChainStore } from 'src/antelope';
 import { defineComponent } from 'vue';
 import { mapGetters, mapActions, mapMutations } from 'vuex';
+import { OreIdAuthenticator } from 'ual-oreid';
+
+const telosLogo = require('src/assets/logo--tlos.svg');
 
 export default defineComponent({
     name: 'NativeLoginButton',
@@ -198,6 +201,20 @@ export default defineComponent({
             }
             this.resLow = this.ramLow || this.cpuLow || this.netLow;
         },
+        getWalletIcon(wallet) {
+            if (wallet instanceof OreIdAuthenticator) {
+                return telosLogo;
+            }
+
+            return wallet.getStyle().icon;
+        },
+        getWalletName(wallet) {
+            if (wallet instanceof OreIdAuthenticator) {
+                return this.$t('home.login_with_social_media');
+            }
+
+            return wallet.getStyle().text;
+        },
     },
     watch: {
         async isAuthenticated() {
@@ -277,10 +294,10 @@ export default defineComponent({
                     class="q-my-sm"
                 >
                     <q-item-section class="cursor-pointer" avatar @click="onLogin(idx)">
-                        <img :src="wallet.getStyle().icon" width="30" >
+                        <img :src="getWalletIcon(wallet)" width="30" >
                     </q-item-section>
                     <q-item-section class="cursor-pointer" @click="onLogin(idx)">
-                        {{ wallet.getStyle().text }}
+                        {{ getWalletName(wallet) }}
                     </q-item-section>
                     <q-item-section class="flex" avatar>
                         <q-spinner

From f14ac6edfabe4860560afd17e30f79c26849324a Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Wed, 20 Sep 2023 16:47:13 -0400
Subject: [PATCH 250/268] update wallet icon

---
 src/assets/logo--telos-cloud-wallet.svg | 11 +++++++++++
 src/pages/home/EVMLoginButtons.vue      |  2 +-
 src/pages/home/NativeLoginButton.vue    |  2 +-
 3 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/logo--telos-cloud-wallet.svg

diff --git a/src/assets/logo--telos-cloud-wallet.svg b/src/assets/logo--telos-cloud-wallet.svg
new file mode 100644
index 000000000..7f89a28c4
--- /dev/null
+++ b/src/assets/logo--telos-cloud-wallet.svg
@@ -0,0 +1,11 @@
+<svg width="247" height="221" viewBox="0 0 247 221" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M194.8 80.7001L184.5 82.6001C183.2 82.8001 182.2 83.7001 181.7 84.9001C180.7 87.3001 179 89.3001 176.9 90.7001L176.3 91.1001C173.1 90.4001 169.7 90.0001 166.3 90.0001C161.1 90.0001 156.2 90.8001 151.5 92.4001C147.5 84.2001 141.6 77.1001 134.6 71.5001C134.6 70.2001 134.6 68.8001 134.7 67.5001L134.8 66.4001C134.9 63.8001 135.8 61.4001 137.4 59.3001C138.2 58.2001 138.4 56.9001 138 55.7001L134.5 45.8001C134.3 45.2001 134.5 44.4001 135 44.0001L142.4 37.5001C142.7 37.2001 143.2 37.1001 143.5 37.1001L170.1 37.4001C171.8 37.4001 173.3 36.6001 174.2 35.3001L177.4 30.6001L188 31.3001L184.8 39.6001C183.8 42.2001 184 45.0001 185.4 47.4001L197.9 68.8001C198.1 69.2001 198.1 69.6001 198.1 70.0001L196.2 79.6001C195.9 80.1001 195.4 80.6001 194.8 80.7001Z" fill="white"/>
+<path d="M230.4 64.9999C230.4 84.6999 221.5 102.4 207.5 114.1C202.4 105 194.3 97.6999 184.6 93.5999C185.8 92.2999 186.8 90.8999 187.7 89.3999L196.3 87.7999C199.9 87.1999 202.7 84.3999 203.5 80.6999L205.4 71.0999C205.8 68.8999 205.5 66.6999 204.3 64.7999L191.8 43.3999C191.6 42.9999 191.5 42.4999 191.7 41.9999L196 30.6999C196.6 29.1999 196.4 27.4999 195.6 26.1999C194.7 24.7999 193.3 23.9999 191.7 23.8999L176.6 22.8999C174.8 22.7999 173.2 23.5999 172.2 24.9999L168.9 29.7999L143.5 29.6999H143.4C141.2 29.6999 139.1 30.4999 137.5 31.8999L130.1 38.3999C127.3 40.8999 126.3 44.6999 127.5 48.1999L130.4 56.3999C128.6 59.1999 127.6 62.4999 127.5 65.8999V66.5999C120 62.1999 111.5 59.3999 102.5 58.4999C105.8 26.0999 133.1 0.899902 166.4 0.899902C201.7 0.899902 230.4 29.5999 230.4 64.9999Z" fill="white"/>
+<path d="M147.8 101.4C147.8 101.4 147.7 101.4 147.7 101.5C147.6 101.5 147.6 101.6 147.5 101.6V101.7C147.6 101.7 147.6 101.6 147.7 101.6C147.9 101.5 148.1 101.4 148.2 101.3L147.8 101.4Z" fill="white"/>
+<path d="M135.2 157C134.4 157.9 133.5 158.7 132.6 159.5L132.5 159.6C131.9 158.8 131.4 157.9 130.9 157H135.2Z" fill="white"/>
+<path d="M130.9 157H135.3C134.5 157.9 133.6 158.7 132.7 159.5L132.6 159.6C131.9 158.8 131.4 157.9 130.9 157Z" fill="white"/>
+<path d="M148.2 101.3C148 101.4 147.9 101.5 147.7 101.6C147.6 101.6 147.6 101.7 147.5 101.7V101.6C147.6 101.6 147.6 101.5 147.7 101.5C147.7 101.5 147.8 101.5 147.8 101.4L148.2 101.3Z" fill="white"/>
+<path d="M208.8 146.3C207.6 146.3 206.4 146.4 205.2 146.5C205.5 145.3 205.7 144.1 205.9 142.9C206.1 141.7 206.2 140.5 206.2 139.3C206.2 138.6 206.2 138 206.2 137.3C206.2 130.5 204.5 124.2 201.6 118.6C196.6 109.1 188.1 101.9 177.7 98.7997C174.3 97.7997 170.7 97.1997 167 97.0997C166.7 97.0997 166.3 97.0997 166 97.0997C165.7 97.0997 165.5 97.0997 165.2 97.0997C165 97.0997 164.9 97.0997 164.7 97.0997C161 97.1997 157.5 97.7997 154.2 98.7997C153.1 99.0997 152 99.4997 150.9 99.9997C149.8 100.4 148.8 100.9 147.8 101.4L148.2 101.3C148 101.4 147.9 101.5 147.7 101.6C147.6 101.6 147.6 101.7 147.5 101.7V101.6C147.5 101.6 147.5 101.6 147.5 101.5C147.1 100.4 146.7 99.3997 146.3 98.2997C145.8 97.1997 145.3 96.0997 144.8 95.0997C142.4 90.3997 139.4 86.0997 135.8 82.2997C133.3 79.5997 130.5 77.1997 127.5 75.0997C120.2 69.8997 111.5 66.4997 102.1 65.4997C100.7 65.3997 99.2 65.2997 97.8 65.1997C97.3 65.1997 96.9 65.1997 96.4 65.1997C96 65.1997 95.6 65.1997 95.2 65.1997C68 65.7997 45.6 86.4997 42.6 113.1C42.5 114.3 42.4 115.5 42.3 116.7C42.3 117.5 42.2 118.4 42.2 119.3C42.2 119.6 42.2 120 42.2 120.3C18.2 124.3 0 145.2 0 170.3C0 198.3 22.7 221 50.7 221H208.8C229.4 221 246.2 204.3 246.2 183.7C246.2 163.1 229.4 146.3 208.8 146.3ZM130.9 157H135.3C134.5 157.9 133.6 158.7 132.7 159.5L132.6 159.6C131.9 158.8 131.4 157.9 130.9 157Z" fill="white"/>
+<path d="M135.2 157C134.4 157.9 133.5 158.7 132.6 159.5L132.5 159.6C131.9 158.8 131.4 157.9 130.9 157H135.2Z" fill="white"/>
+<path d="M147.6 101.5H147.4C147.4 101.5 147.4 101.5 147.4 101.6C147.5 101.6 147.5 101.5 147.6 101.5C147.7 101.5 147.7 101.5 147.8 101.5H147.6Z" fill="white"/>
+</svg>
diff --git a/src/pages/home/EVMLoginButtons.vue b/src/pages/home/EVMLoginButtons.vue
index a80621578..d684e687c 100644
--- a/src/pages/home/EVMLoginButtons.vue
+++ b/src/pages/home/EVMLoginButtons.vue
@@ -129,7 +129,7 @@ export default defineComponent({
             <img
                 width="24"
                 class="c-evm-login-buttons__icon c-evm-login-buttons__icon--oreid"
-                src="~assets/logo--tlos.svg"
+                src="~assets/logo--telos-cloud-wallet.svg"
             >
             {{ $t('home.login_with_social_media') }}
         </template>
diff --git a/src/pages/home/NativeLoginButton.vue b/src/pages/home/NativeLoginButton.vue
index f3b55e50f..4999f62a2 100644
--- a/src/pages/home/NativeLoginButton.vue
+++ b/src/pages/home/NativeLoginButton.vue
@@ -5,7 +5,7 @@ import { defineComponent } from 'vue';
 import { mapGetters, mapActions, mapMutations } from 'vuex';
 import { OreIdAuthenticator } from 'ual-oreid';
 
-const telosLogo = require('src/assets/logo--tlos.svg');
+const telosLogo = require('src/assets/logo--telos-cloud-wallet.svg');
 
 export default defineComponent({
     name: 'NativeLoginButton',

From 5365422e0af4b96b7c4cafa52bf7b1a4299219a5 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 21 Sep 2023 16:06:18 -0300
Subject: [PATCH 251/268] hotfix for blank page site

---
 src/antelope/stores/history.ts | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index d1ed58856..e72a7a6b9 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -98,17 +98,18 @@ export const useHistoryStore = defineStore(store_name, {
     actions: {
         trace: createTraceFunction(store_name),
         init: () => {
+            const self = useHistoryStore();
+            self.clearEvmNftTransfers();
+            self.clearEvmTransactions();
             useFeedbackStore().setDebug(store_name, isTracingAll());
             getAntelope().events.onAccountChanged.subscribe({
                 next: ({ account }) => {
-                    const self = useHistoryStore();
                     if (account) {
                         self.setEVMTransactionsFilter({ address: account.account });
                     }
                 },
             });
         },
-
         // actions ---
 
         // fetch all transactions for the account defined in __evm_filter.address
@@ -479,21 +480,15 @@ export const useHistoryStore = defineStore(store_name, {
 
 const historyInitialState: HistoryState = {
     __evm_transactions: {
-        [CURRENT_CONTEXT]: {
-            transactions: [],
-        },
     },
     __total_evm_transaction_count: {
-        [CURRENT_CONTEXT]: 0,
     },
     __evm_filter: {
         address: '',
     },
     __shaped_evm_transaction_rows: {
-        [CURRENT_CONTEXT]: [],
     },
     __evm_transactions_pagination_data: {},
     __evm_nft_transfers: {
-        [CURRENT_CONTEXT]: new Map(),
     },
 };

From 30c0e7793d5e21be154aebc4b7db8761aa57d8f2 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 21 Sep 2023 20:22:05 -0300
Subject: [PATCH 252/268] adding new Telos cloud submenu

---
 src/antelope/stores/account.ts     |   2 +-
 src/antelope/stores/history.ts     |  10 +-
 src/antelope/wallets/index.ts      |   4 +-
 src/assets/icon--facebook.svg      |   3 +
 src/assets/icon--google.svg        |   3 +
 src/assets/icon--telos-cloud.svg   |  11 ++
 src/assets/icon--twitter.svg       |  10 +
 src/css/global/_colors.scss        |  47 +++++
 src/i18n/en-us/index.js            |   6 +
 src/pages/home/EVMLoginButtons.vue | 305 +++++++++++++++++++++--------
 src/pages/home/HomePage.vue        |  85 +++-----
 src/pages/home/MenuType.ts         |   5 +
 test/jest/utils/antelope/index.ts  |   2 +-
 13 files changed, 347 insertions(+), 146 deletions(-)
 create mode 100644 src/assets/icon--facebook.svg
 create mode 100644 src/assets/icon--google.svg
 create mode 100644 src/assets/icon--telos-cloud.svg
 create mode 100644 src/assets/icon--twitter.svg
 create mode 100644 src/pages/home/MenuType.ts

diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index b4b033d6a..3559555a1 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -258,7 +258,7 @@ export const useAccountStore = defineStore(store_name, {
                             network,
                         });
                     } else {
-                        const authenticator = getAntelope().wallets.getAutenticator(autoLogin)?.newInstance(label);
+                        const authenticator = getAntelope().wallets.getAuthenticator(autoLogin)?.newInstance(label);
                         if (!authenticator) {
                             console.error(getAntelope().wallets);
                             throw new Error('antelope.account.error_auto_login');
diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index d1ed58856..2294e6729 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -98,10 +98,12 @@ export const useHistoryStore = defineStore(store_name, {
     actions: {
         trace: createTraceFunction(store_name),
         init: () => {
+            const self = useHistoryStore();
+            self.clearEvmNftTransfers();
+            self.clearEvmTransactions();
             useFeedbackStore().setDebug(store_name, isTracingAll());
             getAntelope().events.onAccountChanged.subscribe({
                 next: ({ account }) => {
-                    const self = useHistoryStore();
                     if (account) {
                         self.setEVMTransactionsFilter({ address: account.account });
                     }
@@ -479,21 +481,15 @@ export const useHistoryStore = defineStore(store_name, {
 
 const historyInitialState: HistoryState = {
     __evm_transactions: {
-        [CURRENT_CONTEXT]: {
-            transactions: [],
-        },
     },
     __total_evm_transaction_count: {
-        [CURRENT_CONTEXT]: 0,
     },
     __evm_filter: {
         address: '',
     },
     __shaped_evm_transaction_rows: {
-        [CURRENT_CONTEXT]: [],
     },
     __evm_transactions_pagination_data: {},
     __evm_nft_transfers: {
-        [CURRENT_CONTEXT]: new Map(),
     },
 };
diff --git a/src/antelope/wallets/index.ts b/src/antelope/wallets/index.ts
index 33b7ee216..179771eaa 100644
--- a/src/antelope/wallets/index.ts
+++ b/src/antelope/wallets/index.ts
@@ -22,8 +22,8 @@ export class AntelopeWallets {
         this.authenticators.set(authenticator.getName(), authenticator);
     }
 
-    getAutenticator(name: string) {
-        this.trace('getAutenticator', name);
+    getAuthenticator(name: string) {
+        this.trace('getAuthenticator', name);
         return this.authenticators.get(name);
     }
 }
diff --git a/src/assets/icon--facebook.svg b/src/assets/icon--facebook.svg
new file mode 100644
index 000000000..eab07f7f0
--- /dev/null
+++ b/src/assets/icon--facebook.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 0.0200195C2.25 0.0200195 0 2.26502 0 5.03002C0 7.53002 1.83 9.60502 4.22 9.98002V6.48002H2.95V5.03002H4.22V3.92502C4.22 2.67002 4.965 1.98002 6.11 1.98002C6.655 1.98002 7.225 2.07502 7.225 2.07502V3.31002H6.595C5.975 3.31002 5.78 3.69502 5.78 4.09002V5.03002H7.17L6.945 6.48002H5.78V9.98002C6.95822 9.79394 8.0311 9.19278 8.80496 8.28505C9.57882 7.37732 10.0027 6.22284 10 5.03002C10 2.26502 7.75 0.0200195 5 0.0200195Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon--google.svg b/src/assets/icon--google.svg
new file mode 100644
index 000000000..d0b61fb68
--- /dev/null
+++ b/src/assets/icon--google.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6737 5.55024H6.08867V6.91524H9.34367C9.17867 8.82024 7.59367 9.63525 6.09367 9.63525C4.17867 9.63525 2.49867 8.12525 2.49867 6.00024C2.49867 3.95024 4.09867 2.36524 6.09867 2.36524C7.64367 2.36524 8.54867 3.35024 8.54867 3.35024L9.49867 2.36024C9.49867 2.36024 8.27867 1.00024 6.04867 1.00024C3.20867 1.00024 1.01367 3.40024 1.01367 6.00024C1.01367 8.52525 3.07867 11.0002 6.12367 11.0002C8.79867 11.0002 10.7487 9.16525 10.7487 6.45524C10.7487 5.88024 10.6737 5.55024 10.6737 5.55024Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon--telos-cloud.svg b/src/assets/icon--telos-cloud.svg
new file mode 100644
index 000000000..4511ecda9
--- /dev/null
+++ b/src/assets/icon--telos-cloud.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9891 8.05131L17.9851 8.23653C17.8583 8.25602 17.7609 8.34376 17.7121 8.46074C17.6146 8.69469 17.4489 8.88966 17.2442 9.02613L17.1857 9.06512C16.8738 8.99689 16.5423 8.95789 16.2109 8.95789C15.704 8.95789 15.2263 9.03588 14.7682 9.19185C14.3782 8.3925 13.8031 7.70038 13.1207 7.15448C13.1207 7.02776 13.1207 6.89128 13.1305 6.76455L13.1402 6.65733C13.15 6.40387 13.2377 6.16992 13.3937 5.96521C13.4717 5.85798 13.4912 5.73125 13.4522 5.61427L13.111 4.6492C13.0915 4.59071 13.111 4.51273 13.1597 4.47374L13.8811 3.8401C13.9103 3.81086 13.9591 3.80111 13.9883 3.80111L16.5813 3.83036C16.7471 3.83036 16.8933 3.75237 16.981 3.62564L17.293 3.16748L18.3263 3.23572L18.0143 4.04482C17.9168 4.29827 17.9363 4.57122 18.0728 4.80517L19.2913 6.89128C19.3108 6.93027 19.3108 6.96927 19.3108 7.00826L19.1256 7.94408C19.0964 7.99282 19.0476 8.04156 18.9891 8.05131Z" fill="white"/>
+<path d="M22.4601 6.52079C22.4601 8.44118 21.5925 10.1666 20.2278 11.3071C19.7306 10.4201 18.941 9.70844 17.9954 9.30877C18.1124 9.18204 18.2099 9.04557 18.2976 8.89935L19.136 8.74337C19.4869 8.68489 19.7599 8.41194 19.8378 8.05125L20.0231 7.11543C20.062 6.90097 20.0328 6.68651 19.9158 6.5013L18.6973 4.41519C18.6778 4.3762 18.6681 4.32745 18.6876 4.27871L19.1067 3.17717C19.1652 3.03095 19.1457 2.86523 19.0677 2.7385C18.98 2.60203 18.8435 2.52404 18.6876 2.5143L17.2156 2.41681C17.0401 2.40707 16.8841 2.48505 16.7867 2.62153L16.465 3.08944L13.9889 3.07969H13.9792C13.7647 3.07969 13.56 3.15767 13.404 3.29415L12.6827 3.92778C12.4097 4.17148 12.3123 4.54191 12.4292 4.8831L12.7119 5.68245C12.5365 5.9554 12.439 6.27709 12.4292 6.60853V6.67676C11.6981 6.24784 10.8695 5.9749 9.99219 5.88716C10.3139 2.72875 12.9751 0.272217 16.2213 0.272217C19.6624 0.272217 22.4601 3.06994 22.4601 6.52079Z" fill="white"/>
+<path d="M14.4082 10.0691C14.4082 10.0691 14.3984 10.0691 14.3984 10.0788C14.3887 10.0788 14.3887 10.0886 14.3789 10.0886V10.0983C14.3887 10.0983 14.3887 10.0886 14.3984 10.0886C14.4179 10.0788 14.4374 10.0691 14.4471 10.0593L14.4082 10.0691Z" fill="white"/>
+<path d="M13.1799 15.489C13.1019 15.5767 13.0142 15.6547 12.9265 15.7327L12.9167 15.7425C12.8582 15.6645 12.8095 15.5767 12.7607 15.489H13.1799Z" fill="white"/>
+<path d="M12.7607 15.489H13.1897C13.1117 15.5767 13.0239 15.6547 12.9362 15.7327L12.9265 15.7425C12.8582 15.6645 12.8095 15.5767 12.7607 15.489Z" fill="white"/>
+<path d="M14.4471 10.0593C14.4276 10.0691 14.4179 10.0788 14.3984 10.0886C14.3887 10.0886 14.3887 10.0983 14.3789 10.0983V10.0886C14.3887 10.0886 14.3887 10.0788 14.3984 10.0788C14.3984 10.0788 14.4082 10.0788 14.4082 10.0691L14.4471 10.0593Z" fill="white"/>
+<path d="M20.3542 14.446C20.2372 14.446 20.1202 14.4558 20.0032 14.4655C20.0325 14.3486 20.052 14.2316 20.0715 14.1146C20.091 13.9976 20.1007 13.8807 20.1007 13.7637C20.1007 13.6954 20.1007 13.637 20.1007 13.5687C20.1007 12.9058 19.935 12.2917 19.6523 11.7458C19.1649 10.8197 18.3363 10.1179 17.3225 9.81567C16.9911 9.71819 16.6401 9.6597 16.2794 9.64995C16.2502 9.64995 16.2112 9.64995 16.182 9.64995C16.1527 9.64995 16.1332 9.64995 16.104 9.64995C16.0845 9.64995 16.0747 9.64995 16.0552 9.64995C15.6946 9.6597 15.3534 9.71819 15.0317 9.81567C14.9245 9.84491 14.8172 9.88391 14.71 9.93265C14.6028 9.97164 14.5053 10.0204 14.4078 10.0691L14.4468 10.0594C14.4273 10.0691 14.4175 10.0789 14.398 10.0886C14.3883 10.0886 14.3883 10.0984 14.3786 10.0984V10.0886C14.3786 10.0886 14.3786 10.0886 14.3786 10.0789C14.3396 9.97164 14.3006 9.87416 14.2616 9.76693C14.2128 9.6597 14.1641 9.55247 14.1154 9.45499C13.8814 8.99682 13.589 8.57765 13.238 8.20722C12.9943 7.94402 12.7214 7.71006 12.4289 7.50535C11.7173 6.99845 10.8692 6.66701 9.95288 6.56953C9.81641 6.55978 9.67019 6.55003 9.53371 6.54028C9.48497 6.54028 9.44598 6.54028 9.39724 6.54028C9.35824 6.54028 9.31925 6.54028 9.28026 6.54028C6.62876 6.59877 4.44517 8.61664 4.15272 11.2097C4.14297 11.3266 4.13322 11.4436 4.12348 11.5606C4.12348 11.6386 4.11373 11.7263 4.11373 11.814C4.11373 11.8433 4.11373 11.8823 4.11373 11.9115C1.77417 12.3015 0 14.3388 0 16.7856C0 19.5151 2.21284 21.7279 4.94232 21.7279H20.3542C22.3623 21.7279 24 20.1 24 18.0919C24 16.0837 22.3623 14.446 20.3542 14.446ZM12.7604 15.4891H13.1893C13.1113 15.5768 13.0236 15.6548 12.9358 15.7328L12.9261 15.7426C12.8578 15.6646 12.8091 15.5768 12.7604 15.4891Z" fill="white"/>
+<path d="M13.1799 15.489C13.1019 15.5767 13.0142 15.6547 12.9265 15.7327L12.9167 15.7425C12.8582 15.6645 12.8095 15.5767 12.7607 15.489H13.1799Z" fill="white"/>
+<path d="M14.3886 10.0789H14.3691C14.3691 10.0789 14.3691 10.0789 14.3691 10.0886C14.3789 10.0886 14.3789 10.0789 14.3886 10.0789C14.3984 10.0789 14.3984 10.0789 14.4081 10.0789H14.3886Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon--twitter.svg b/src/assets/icon--twitter.svg
new file mode 100644
index 000000000..e90c00316
--- /dev/null
+++ b/src/assets/icon--twitter.svg
@@ -0,0 +1,10 @@
+<svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5" clip-path="url(#clip0_2311_16173)">
+<path d="M5.35622 4.29259L8.70667 0.397949H7.91272L5.00353 3.77961L2.67996 0.397949H0L3.51369 5.51162L0 9.59574H0.793995L3.86618 6.0246L6.32004 9.59574H9L5.35603 4.29259H5.35622ZM4.26874 5.55667L3.91273 5.04746L1.08008 0.995658H2.29961L4.58559 4.26559L4.9416 4.7748L7.9131 9.02522H6.69357L4.26874 5.55686V5.55667Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2311_16173">
+<rect width="9" height="9.20252" fill="white" transform="translate(0 0.398682)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/css/global/_colors.scss b/src/css/global/_colors.scss
index 1f8dba135..9ba3d2fa5 100644
--- a/src/css/global/_colors.scss
+++ b/src/css/global/_colors.scss
@@ -4,6 +4,7 @@ $tooltip-gradient: linear-gradient(0.2turn, rgba(#071033, 0.8), rgba(#6039A4, 0.
 /*********************
  *** Legacy Colors ***
  *********************/
+$gradientTransparent: linear-gradient(0deg, transparent 0%, transparent 0%);
 $gradientblue: #1AD6FF;
 $gradientPurple: #8946DF;
 $lightBlue: #31C1EE;
@@ -77,3 +78,49 @@ $saveBtn: #2e1f4f;
 body {
     background-color: var(--bg-color);
 }
+
+
+@mixin bordient($radius, $width, $bg, $color1, $color2, $color3: $color2, $color4: $color1) {
+
+    background-image:
+        radial-gradient(circle at 100% 100%, transparent #{$radius - $width}, $color1 #{$radius - $width}, $color1 #{$radius}, transparent #{$radius}),
+        linear-gradient(to right, $color1, $color2),
+        radial-gradient(circle at 0% 100%, transparent #{$radius - $width}, $color2 #{$radius - $width}, $color2 #{$radius}, transparent #{$radius}),
+        linear-gradient(to bottom, $color2, $color3),
+        radial-gradient(circle at 0% 0%, transparent #{$radius - $width}, $color3 #{$radius - $width}, $color3 #{$radius}, transparent #{$radius}),
+        linear-gradient(to left, $color3, $color4),
+        radial-gradient(circle at 100% 0%, transparent #{$radius - $width}, $color4 #{$radius - $width}, $color4 #{$radius}, transparent #{$radius}),
+        linear-gradient(to top, $color4, $color1),
+        $bg
+        ;
+
+    background-position:
+        top left,
+        top center,
+        top right,
+        center right,
+        bottom right,
+        bottom center,
+        bottom left,
+        center left,
+        center center;
+
+    background-size:
+        #{$radius} #{$radius},
+        calc(100% - (2 * #{$radius})) #{$width},
+        #{$radius} #{$radius},
+        #{$width} calc(100% - (2 * #{$radius})),
+        #{$radius} #{$radius},
+        calc(100% - (2 * #{$radius})) #{$width},
+        #{$radius} #{$radius},
+        #{$width} calc(100% - (2 * #{$radius})),
+        calc(100% - #{$width} / 2) calc(100% - #{$width} / 2);
+
+    background-repeat: no-repeat;
+
+    border-radius: #{$radius};
+}
+
+@mixin gradient_border() {
+    @include bordient(4px, 1px, $gradientTransparent, $gradientblue, $gradientPurple, $gradientPurple, $gradientblue);
+}
\ No newline at end of file
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index a726d98e8..74883fc82 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -31,6 +31,11 @@ export default {
         view_any_account: 'View Any Account',
         connect_with_wallet: 'Connect Your Wallet',
         login_with_social_media: 'Telos Cloud Wallet',
+        sign_with_google: 'Sign with Google',
+        sign_with_facebook: 'Sign with Facebook',
+        sign_with_x: 'Sign with X',
+        sign_with_email: 'Sign in with Email',
+        coming_soon: 'Coming soon',
         create_new_account: 'Create a New Account',
         logged_as: 'Logged in as {account}',
         view_wallet: 'View Wallet',
@@ -123,6 +128,7 @@ export default {
         dark_mode: 'Dark Mode',
         light_mode: 'Light Mode',
         contract: 'Contract',
+        back: 'Back',
         to: 'to',
         from: 'from',
         with: 'with',
diff --git a/src/pages/home/EVMLoginButtons.vue b/src/pages/home/EVMLoginButtons.vue
index 70b67125a..3e1a14736 100644
--- a/src/pages/home/EVMLoginButtons.vue
+++ b/src/pages/home/EVMLoginButtons.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
 import { CURRENT_CONTEXT, getAntelope, useAccountStore, useChainStore, useEVMStore, useFeedbackStore, usePlatformStore } from 'src/antelope';
-import { ComponentInternalInstance, computed, defineComponent, getCurrentInstance, ref, watch } from 'vue';
+import { ComponentInternalInstance, PropType, computed, defineComponent, getCurrentInstance, ref, watch } from 'vue';
 import { QSpinnerFacebook } from 'quasar';
 import { OreIdAuth } from 'src/antelope/wallets';
+import { Menu } from 'src/pages/home/MenuType';
 import InlineSvg from 'vue-inline-svg';
 
 export default defineComponent({
@@ -11,6 +12,15 @@ export default defineComponent({
         QSpinnerFacebook,
         InlineSvg,
     },
+    emits: [
+        'update:modelValue',
+    ],
+    props: {
+        modelValue: {
+            type: String as PropType<Menu>,
+            default: Menu.MAIN,
+        },
+    },
     setup(props, { emit }) {
         const ant = getAntelope();
         const globalProps = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
@@ -49,7 +59,7 @@ export default defineComponent({
 
         const setOreIdAuthenticator = async (provider: string) => {
             const name = 'OreId';
-            const auth = ant.wallets.getAutenticator(name);
+            const auth = ant.wallets.getAuthenticator(name);
             if (auth) {
                 (auth as OreIdAuth).setProvider(provider);
                 selectedOAuthProvider.value = provider;
@@ -67,7 +77,7 @@ export default defineComponent({
         };
 
         const setAuthenticator = async(name: string, label: string) => {
-            const auth = ant.wallets.getAutenticator(name);
+            const auth = ant.wallets.getAuthenticator(name);
             if (!auth) {
                 console.error(`${name} authenticator not found`);
                 return;
@@ -97,6 +107,14 @@ export default defineComponent({
             selectedOAuthProvider.value === provider &&
             useFeedbackStore().isLoading('OreId.login');
 
+        // menu navitgaion
+        const showMainMenu = computed(() => props.modelValue === Menu.MAIN);
+        const showTelosCloudMenu = computed(() => props.modelValue === Menu.CLOUD);
+
+        const setCloudMenu = () => {
+            emit('update:modelValue', Menu.CLOUD);
+        };
+
         return {
             isLoading,
             isLoadingOreId,
@@ -112,6 +130,10 @@ export default defineComponent({
             notifyNoProvider,
             redirectToMetamaskDownload,
             redirectToSafepalDownload,
+            // menu navigation
+            showMainMenu,
+            showTelosCloudMenu,
+            setCloudMenu,
         };
     },
 });
@@ -119,84 +141,157 @@ export default defineComponent({
 
 <template>
 <div class="c-evm-login-buttons">
+    <!-- main menu -->
+    <template v-if="showMainMenu">
+
+        <!-- Google OAuth Provider -->
+        <div 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
+                        width="24"
+                        class="c-evm-login-buttons__icon c-evm-login-buttons__icon--cloud"
+                        src="~assets/icon--telos-cloud.svg"
+                    >
+                    <span>{{ $t('home.login_with_social_media') }}</span>
+                </div>
+                <div class="c-evm-login-buttons__cloud-btn-line-icons">
+                    <img
+                        width="12"
+                        class="c-evm-login-buttons__icon c-evm-login-buttons__icon--social"
+                        src="~assets/icon--google.svg"
+                    >
+                    <img
+                        width="12"
+                        class="c-evm-login-buttons__icon c-evm-login-buttons__icon--social"
+                        src="~assets/icon--facebook.svg"
+                    >
+                    <img
+                        width="12"
+                        class="c-evm-login-buttons__icon c-evm-login-buttons__icon--social"
+                        src="~assets/icon--twitter.svg"
+                    >
+                </div>
+            </div>
+        </div>
+
+        <!-- Metamask Authenticator button -->
+        <div
+            v-if="showMetamaskButton"
+            class="c-evm-login-buttons__option"
+            @click="supportsMetamask ?  setMetamaskAuthenticator() : supportsSafePal ? notifyNoProvider('Metamask') : redirectToMetamaskDownload()"
+        >
+            <template v-if="isLoading('Metamask.login')">
+                <div class="c-evm-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <InlineSvg
+                    :src="require('src/assets/evm/metamask_fox.svg')"
+                    class="c-evm-login-buttons__icon c-evm-login-buttons__icon--metamask"
+                    height="24"
+                    width="24"
+                    aria-hidden="true"
+                />
+                {{ supportsMetamask ? $t('home.metamask') : $t('home.install_metamask') }}
+            </template>
+        </div>
+
+        <!-- Safepal Authenticator button -->
+        <div
+            v-if="showSafePalButton"
+            class="c-evm-login-buttons__option"
+            @click="supportsSafePal ? setSafepalAuthenticator() : redirectToSafepalDownload()"
+        >
+            <template v-if="isLoading('SafePal.login')">
+                <div class="c-evm-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <InlineSvg
+                    :src="require('src/assets/evm/safepal.svg')"
+                    class="c-evm-login-buttons__icon c-evm-login-buttons__icon--safepal"
+                    height="24"
+                    width="24"
+                    aria-hidden="true"
+                />
+                {{ supportsSafePal ? $t('home.safepal') : $t('home.install_safepal') }}
+            </template>
+        </div>
+
+        <!-- WalletConnect Authenticator button -->
+        <div
+            v-if="showWalletConnectButton"
+            class="c-evm-login-buttons__option"
+            @click="setWalletConnectAuthenticator()"
+        >
+            <template v-if="isLoading('WalletConnect.login')">
+                <div class="c-evm-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <InlineSvg
+                    :src="require('src/assets/evm/wallet_connect.svg')"
+                    class="c-evm-login-buttons__icon c-evm-login-buttons__icon--wallet-connect"
+                    height="24"
+                    width="24"
+                    aria-hidden="true"
+                />
+                {{ $t('home.walletconnect') }}
+            </template>
+        </div>
+
+    </template>
+
+    <!-- telos cloud menu -->
+    <template v-if="showTelosCloudMenu">
+
+        <!-- Google OAuth Provider -->
+        <div class="c-evm-login-buttons__option c-evm-login-buttons__option--web2" @click="setOreIdAuthenticator('google')">
+            <template v-if="isLoadingOreId('google')">
+                <div class="c-evm-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <img
+                    width="24"
+                    class="c-evm-login-buttons__icon"
+                    src="~assets/icon--google.svg"
+                >
+                {{ $t('home.sign_with_google') }}
+            </template>
+        </div>
+
+        <div class="c-evm-login-buttons__sub-title">{{ $t('home.coming_soon') }}</div>
+
+        <!-- Facebook OAuth Provider -->
+        <div class="c-evm-login-buttons__option c-evm-login-buttons__option--web2 c-evm-login-buttons__option--disabled">
+            <template v-if="isLoadingOreId('facebook')">
+                <div class="c-evm-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <img
+                    width="24"
+                    class="c-evm-login-buttons__icon c-evm-login-buttons__icon--disabled"
+                    src="~assets/icon--facebook.svg"
+                >
+                {{ $t('home.sign_with_facebook') }}
+            </template>
+        </div>
+
+        <!-- X OAuth Provider -->
+        <div class="c-evm-login-buttons__option c-evm-login-buttons__option--web2 c-evm-login-buttons__option--disabled">
+            <template v-if="isLoadingOreId('facebook')">
+                <div class="c-evm-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <img
+                    width="24"
+                    class="c-evm-login-buttons__icon c-evm-login-buttons__icon--disabled"
+                    src="~assets/icon--twitter.svg"
+                >
+                {{ $t('home.sign_with_x') }}
+            </template>
+        </div>
+
+    </template>
 
-    <!-- Google OAuth Provider -->
-    <div class="c-evm-login-buttons__option" @click="setOreIdAuthenticator('google')">
-        <template v-if="isLoadingOreId('google')">
-            <div class="c-evm-login-buttons__loading"><QSpinnerFacebook /></div>
-        </template>
-        <template v-else>
-            <img
-                width="24"
-                class="c-evm-login-buttons__icon c-evm-login-buttons__icon--oreid"
-                src="~assets/logo--tlos.svg"
-            >
-            {{ $t('home.login_with_social_media') }}
-        </template>
-    </div>
-
-    <!-- Metamask Authenticator button -->
-    <div
-        v-if="showMetamaskButton"
-        class="c-evm-login-buttons__option"
-        @click="supportsMetamask ?  setMetamaskAuthenticator() : supportsSafePal ? notifyNoProvider('Metamask') : redirectToMetamaskDownload()"
-    >
-        <template v-if="isLoading('Metamask.login')">
-            <div class="c-evm-login-buttons__loading"><QSpinnerFacebook /></div>
-        </template>
-        <template v-else>
-            <InlineSvg
-                :src="require('src/assets/evm/metamask_fox.svg')"
-                class="c-evm-login-buttons__icon c-evm-login-buttons__icon--metamask"
-                height="24"
-                width="24"
-                aria-hidden="true"
-            />
-            {{ supportsMetamask ? $t('home.metamask') : $t('home.install_metamask') }}
-        </template>
-    </div>
-
-    <!-- Safepal Authenticator button -->
-    <div
-        v-if="showSafePalButton"
-        class="c-evm-login-buttons__option"
-        @click="supportsSafePal ? setSafepalAuthenticator() : redirectToSafepalDownload()"
-    >
-        <template v-if="isLoading('SafePal.login')">
-            <div class="c-evm-login-buttons__loading"><QSpinnerFacebook /></div>
-        </template>
-        <template v-else>
-            <InlineSvg
-                :src="require('src/assets/evm/safepal.svg')"
-                class="c-evm-login-buttons__icon c-evm-login-buttons__icon--safepal"
-                height="24"
-                width="24"
-                aria-hidden="true"
-            />
-            {{ supportsSafePal ? $t('home.safepal') : $t('home.install_safepal') }}
-        </template>
-    </div>
-
-    <!-- WalletConnect Authenticator button -->
-    <div
-        v-if="showWalletConnectButton"
-        class="c-evm-login-buttons__option"
-        @click="setWalletConnectAuthenticator()"
-    >
-        <template v-if="isLoading('WalletConnect.login')">
-            <div class="c-evm-login-buttons__loading"><QSpinnerFacebook /></div>
-        </template>
-        <template v-else>
-            <InlineSvg
-                :src="require('src/assets/evm/wallet_connect.svg')"
-                class="c-evm-login-buttons__icon c-evm-login-buttons__icon--wallet-connect"
-                height="24"
-                width="24"
-                aria-hidden="true"
-            />
-            {{ $t('home.walletconnect') }}
-        </template>
-    </div>
 
 </div>
 </template>
@@ -224,6 +319,40 @@ export default defineComponent({
     &__icon {
         margin-top: -1px;
         transition: all 0.3s;
+        &--disabled {
+            opacity: 0.5;
+        }
+    }
+
+    &__cloud-btn-container {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__cloud-btn-line-icons {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__cloud-btn-line-title {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__sub-title {
+        color: $white;
     }
 
     &__option {
@@ -242,7 +371,7 @@ export default defineComponent({
         padding: 14px;
         cursor: pointer;
 
-        &:hover {
+        &:hover:not(&--disabled) {
             color: $white;
             outline-color: $white;
             outline-width: 2px;
@@ -257,6 +386,20 @@ export default defineComponent({
                 }
             }
         }
+
+        &--telos-cloud {
+            height: max-content;
+            &:not(:hover) {
+                outline-width: 0;
+                @include gradient_border();
+            }
+        }
+
+        &--disabled {
+            color: #9289b1;
+            outline-color: #9289b1;
+            cursor: not-allowed;
+        }
     }
 }
 </style>
diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index 146978cea..409537ffe 100644
--- a/src/pages/home/HomePage.vue
+++ b/src/pages/home/HomePage.vue
@@ -5,6 +5,7 @@ import { mapGetters } from 'vuex';
 import NativeLoginButton from 'pages/home/NativeLoginButton.vue';
 import EVMLoginButtons from 'pages/home/EVMLoginButtons.vue';
 import { getAntelope, useEVMStore, usePlatformStore } from 'src/antelope';
+import { Menu } from 'src/pages/home/MenuType';
 
 export default defineComponent({
     name: 'HomePage',
@@ -13,61 +14,23 @@ export default defineComponent({
         NativeLoginButton,
     },
     data: (): {
-        tab: 'left' | 'right'
-        showWalletOptions: boolean,
-        showOAuthOptions: boolean,
-        showWalletConnect: boolean,
-        useInjectedProvider: string,
+        tab: 'left' | 'right',
+        currentMenu: Menu,
     } => ({
         tab: 'left',
-        showWalletOptions: false,
-        showOAuthOptions: false,
-        showWalletConnect: false,
-        useInjectedProvider: '',
+        currentMenu: Menu.MAIN,
     }),
 
     computed: {
         ...mapGetters('account', ['isAuthenticated']),
+        showLeftRightBtns(): boolean {
+            return this.currentMenu === Menu.MAIN;
+        },
     },
 
     methods: {
-        onUseInjectedProvider() {
-            // first check the integrity of the injected provider
-            const evm = useEVMStore();
-            const platform = usePlatformStore();
-            console.assert(platform.isMobile, 'onUseInjectedProvider should only be called on mobile');
-            console.assert(evm.injectedProviderNames.length === 1, 'only one injected provider is supported for mobile');
-            const providerName = evm.injectedProviderNames[0];
-            const authenticator = evm.injectedProvider(providerName);
-            if (!authenticator) {
-                console.error(`${providerName} authenticator not found`);
-                getAntelope().config.notifyFailureMessage(
-                    this.$t(
-                        'home.no_injected_provider_found',
-                        { providerName },
-                    ),
-                );
-                return;
-            }
-            // Everything is fine, let's use the injected provider
-            this.useInjectedProvider = providerName;
-        },
-        onShowWalletConnect() {
-            this.showWalletConnect = true;
-            // put this variable back to false for an eventual re-open
-            setTimeout(() => {
-                this.showWalletConnect = false;
-            }, 200);
-        },
-        onShowWalletOptions(show: boolean) {
-            this.showWalletOptions = show;
-            if (!show) {
-                this.showOAuthOptions = false;
-            }
-        },
-        onShowOAuthOptions(show: boolean) {
-            this.showOAuthOptions = show;
-            this.showWalletOptions = show;
+        goBack(): void {
+            this.currentMenu = Menu.MAIN;
         },
     },
 });
@@ -83,8 +46,8 @@ export default defineComponent({
                     :alt="$t('home.wallet_logo_alt')"
                     class="c-home__logo"
                 >
-                <div v-if="!showWalletOptions" class="c-home__button-container">
-                    <div class="c-home__network-toggle-container" role="tablist">
+                <div class="c-home__button-container">
+                    <div v-if="showLeftRightBtns" class="c-home__network-toggle-container" role="tablist">
                         <button
                             :class="{
                                 'c-home__network-toggle-button': true,
@@ -112,15 +75,24 @@ export default defineComponent({
                             {{ $t('global.native') }}
                         </button>
                     </div>
+                    <div v-else>
+                        <q-btn
+                            class="c-home__menu-back-button"
+                            flat
+                            dense
+                            icon="arrow_back_ios"
+                            @click="goBack"
+                        >
+
+                            {{ $t('global.back') }}
+                        </q-btn>
+                    </div>
 
                     <NativeLoginButton v-if="tab === 'right'" />
 
                     <EVMLoginButtons
                         v-else-if="tab === 'left'"
-                        @show-wallet-connect="onShowWalletConnect()"
-                        @show-wallet-options="onShowWalletOptions(true)"
-                        @use-injected-provider="onUseInjectedProvider()"
-                        @show-oauth-options="onShowOAuthOptions(true)"
+                        v-model="currentMenu"
                     />
                 </div>
                 <div v-if="tab === 'left'" class="c-home__external-link">
@@ -138,7 +110,7 @@ export default defineComponent({
                         <a
                             href="https://www.telos.net/terms-of-service"
                             target="_blank"
-                            class="text-white"
+                            class="c-home__external-link-text"
                         >
                             {{$t('home.terms')}}
                         </a>
@@ -146,7 +118,7 @@ export default defineComponent({
                         <a
                             href="https://www.telos.net/privacy-policy"
                             target="_blank"
-                            class="text-white"
+                            class="c-home__external-link-text"
                         >
                             {{$t('home.privacy')}}
                         </a>
@@ -233,6 +205,11 @@ export default defineComponent({
         }
     }
 
+    &__menu-back-button {
+        color: white;
+        margin-bottom: 24px;
+    }
+
     &__external-link {
         display: flex;
         flex-direction: row;
diff --git a/src/pages/home/MenuType.ts b/src/pages/home/MenuType.ts
new file mode 100644
index 000000000..1b20c300f
--- /dev/null
+++ b/src/pages/home/MenuType.ts
@@ -0,0 +1,5 @@
+export enum Menu {
+    MAIN = 'main',
+    CLOUD = 'cloud',
+}
+
diff --git a/test/jest/utils/antelope/index.ts b/test/jest/utils/antelope/index.ts
index a1d6dfe35..6fb36a140 100644
--- a/test/jest/utils/antelope/index.ts
+++ b/test/jest/utils/antelope/index.ts
@@ -18,7 +18,7 @@ export const getAntelope = jest.fn().mockImplementation(() => ({
         errorToStringHandler: jest.fn(),
     },
     wallets: {
-        getAutenticator: () => ({
+        getAuthenticator: () => ({
             newInstance: (label: string) => ({
                 label,
                 isConnectedTo: () => Promise.resolve(true),

From c7bb5309f39b2671f431fcdfbdd62629365db59f Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 21 Sep 2023 20:36:42 -0300
Subject: [PATCH 253/268] adding some comments for the border gradient mixin

---
 src/css/global/_colors.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/css/global/_colors.scss b/src/css/global/_colors.scss
index 9ba3d2fa5..fb14b2a8f 100644
--- a/src/css/global/_colors.scss
+++ b/src/css/global/_colors.scss
@@ -79,7 +79,14 @@ body {
     background-color: var(--bg-color);
 }
 
-
+/** 
+ * This creates the ilusion of a gradient border using a background with 5 layers.
+ * The first four layers are the four borders, and the last layer is the background.
+ * To use this mixin, you must pass in:
+   - the radius of the border
+   - the width of the border
+   - the background-image value, and two or four colors (if using only two, the other two will repeat the pair as default)
+ */
 @mixin bordient($radius, $width, $bg, $color1, $color2, $color3: $color2, $color4: $color1) {
 
     background-image:

From 77fc4f11227d39b6a4a92fc1f6cc6a471e7b1e52 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 21 Sep 2023 21:22:51 -0300
Subject: [PATCH 254/268] adding developer banner at the bottom of the HomePage

---
 src/assets/developer-banner.svg |  9 ++++
 src/i18n/en-us/index.js         |  2 +
 src/pages/home/HomePage.vue     | 78 +++++++++++++++++++++++++++++++--
 3 files changed, 86 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/developer-banner.svg

diff --git a/src/assets/developer-banner.svg b/src/assets/developer-banner.svg
new file mode 100644
index 000000000..204c16a62
--- /dev/null
+++ b/src/assets/developer-banner.svg
@@ -0,0 +1,9 @@
+<svg width="80" height="11" viewBox="0 0 80 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.107422 10.5V0.697266H3.40918C4.17936 0.697266 4.87891 0.818034 5.50781 1.05957C6.13672 1.29655 6.66081 1.63151 7.08008 2.06445C7.50391 2.49284 7.82975 3.00781 8.05762 3.60938C8.29004 4.20638 8.40625 4.86035 8.40625 5.57129C8.40625 7.09342 7.96191 8.29655 7.07324 9.18066C6.18913 10.0602 4.96777 10.5 3.40918 10.5H0.107422ZM1.9668 8.87305H3.34082C3.78288 8.87305 4.18848 8.80697 4.55762 8.6748C4.93132 8.54264 5.26172 8.34668 5.54883 8.08691C5.84049 7.82715 6.06836 7.48307 6.23242 7.05469C6.39648 6.62174 6.47852 6.12728 6.47852 5.57129C6.47852 4.86035 6.33496 4.25651 6.04785 3.75977C5.7653 3.26302 5.3916 2.90072 4.92676 2.67285C4.46191 2.44043 3.93327 2.32422 3.34082 2.32422H1.9668V8.87305ZM10.3952 10.5V0.697266H16.3972V2.31055H12.2546V4.74414H15.7956V6.34375H12.2546V8.88672H16.5407V10.5H10.3952ZM17.6274 0.697266H19.685L22.187 8.08008H22.2895L24.8188 0.697266H26.8764L23.2123 10.5H21.2504L17.6274 0.697266ZM28.4826 10.5V0.697266H34.4845V2.31055H30.342V4.74414H33.883V6.34375H30.342V8.88672H34.6281V10.5H28.4826ZM36.6102 10.5V0.697266H38.4696V8.8457H42.4345V10.5H36.6102ZM43.2477 5.59863C43.2477 4.65072 43.471 3.78939 43.9176 3.01465C44.3642 2.23535 44.9817 1.62467 45.7701 1.18262C46.5585 0.74056 47.4404 0.519531 48.4156 0.519531C49.1448 0.519531 49.8284 0.651693 50.4664 0.916016C51.109 1.17578 51.6559 1.53125 52.107 1.98242C52.5628 2.43359 52.9205 2.97363 53.1803 3.60254C53.4446 4.22689 53.5768 4.89225 53.5768 5.59863C53.5768 6.54655 53.3535 7.41016 52.9068 8.18945C52.4602 8.96419 51.8404 9.57487 51.0475 10.0215C50.2591 10.4635 49.3772 10.6846 48.402 10.6846C47.4267 10.6846 46.5449 10.4658 45.7564 10.0283C44.9726 9.58626 44.3574 8.97786 43.9107 8.20312C43.4687 7.42383 43.2477 6.55566 43.2477 5.59863ZM45.1822 5.59863C45.1822 6.55566 45.4853 7.34635 46.0914 7.9707C46.7021 8.59505 47.4768 8.90723 48.4156 8.90723C49.3499 8.90723 50.1201 8.59505 50.7262 7.9707C51.3323 7.34635 51.6354 6.55566 51.6354 5.59863C51.6354 4.65527 51.33 3.86914 50.7193 3.24023C50.1132 2.61133 49.3453 2.29688 48.4156 2.29688C47.4768 2.29688 46.7021 2.61133 46.0914 3.24023C45.4853 3.86914 45.1822 4.65527 45.1822 5.59863ZM55.5726 10.5V0.697266H59.2845C60.2324 0.697266 61.014 0.991211 61.6292 1.5791C62.249 2.16699 62.5589 2.92806 62.5589 3.8623C62.5589 4.46842 62.4131 5.01758 62.1214 5.50977C61.8297 6.00195 61.4333 6.38477 60.932 6.6582C60.4352 6.93164 59.8861 7.06836 59.2845 7.06836H57.432V10.5H55.5726ZM57.432 5.47559H59.0863C59.5511 5.47559 59.9271 5.32747 60.2142 5.03125C60.5058 4.73047 60.6517 4.34082 60.6517 3.8623C60.6517 3.3929 60.5081 3.01465 60.221 2.72754C59.9339 2.44043 59.5557 2.29688 59.0863 2.29688H57.432V5.47559ZM64.3702 10.5V0.697266H70.3721V2.31055H66.2295V4.74414H69.7705V6.34375H66.2295V8.88672H70.5157V10.5H64.3702ZM72.4978 10.5V0.697266H76.1619C77.1645 0.697266 77.978 0.986654 78.6023 1.56543C79.2267 2.14421 79.5388 2.89616 79.5388 3.82129C79.5388 4.47754 79.3679 5.05859 79.0261 5.56445C78.6889 6.06576 78.2491 6.43717 77.7068 6.67871L79.8601 10.5H77.7752L75.9431 7H74.3572V10.5H72.4978ZM74.3572 5.40723H76.0252C76.5037 5.40723 76.891 5.27051 77.1873 4.99707C77.4835 4.71908 77.6316 4.32715 77.6316 3.82129C77.6316 3.37012 77.4858 3.00326 77.1941 2.7207C76.907 2.43815 76.5082 2.29688 75.9978 2.29688H74.3572V5.40723Z" fill="url(#paint0_linear_2334_17512)"/>
+<defs>
+<linearGradient id="paint0_linear_2334_17512" x1="-1" y1="-4.5" x2="36.8396" y2="39.6345" gradientUnits="userSpaceOnUse">
+<stop stop-color="#73E6FF"/>
+<stop offset="1" stop-color="#C4A2EF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index a726d98e8..e32278247 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -27,6 +27,8 @@ 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',
         wallet_logo_alt: 'Telos Wallet logo',
         view_any_account: 'View Any Account',
         connect_with_wallet: 'Connect Your Wallet',
diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index 146978cea..6c9684094 100644
--- a/src/pages/home/HomePage.vue
+++ b/src/pages/home/HomePage.vue
@@ -134,11 +134,24 @@ export default defineComponent({
                     <q-icon size="16px" name="launch" />
                 </div>
                 <q-footer bordered class="c-home__footer">
-                    <q-toolbar class="bg-dark flex-center">
+                    <q-toolbar class="c-home__footer-first-line bg-dark flex-center">
+                        <a class="c-home__footer-developr-link" href="https://docs.telos.net/evm/cloud-wallet/" target="_blank">
+                            <!-- TODO: https://github.com/telosnetwork/telos-wallet/issues/614 -->
+                            <!-- this DEVELOPER banner is an image as a work-arroun for texts with gradient -->
+                            <!-- div class="c-home__footer-developr-title">{{ $t('home.developers_banner_title') }}</div -->
+                            <img
+                                src="~assets/developer-banner.svg"
+                                class="c-home__footer-developr-title-svg"
+                            >
+                            <div class="c-home__footer-developr-text c-home__external-link-text">{{ $t('home.developers_banner_text') }}</div>
+                            <q-icon class="c-home__footer-developr-icon" size="16px" name="arrow_forward" />
+                        </a>
+                    </q-toolbar>
+                    <q-toolbar class="c-home__footer-second-line bg-dark flex-center">
                         <a
                             href="https://www.telos.net/terms-of-service"
                             target="_blank"
-                            class="text-white"
+                            class="c-home__external-link-text"
                         >
                             {{$t('home.terms')}}
                         </a>
@@ -146,7 +159,7 @@ export default defineComponent({
                         <a
                             href="https://www.telos.net/privacy-policy"
                             target="_blank"
-                            class="text-white"
+                            class="c-home__external-link-text"
                         >
                             {{$t('home.privacy')}}
                         </a>
@@ -262,6 +275,65 @@ export default defineComponent({
         z-index: $z-index--connect-wallet-popup;
     }
 
+    &__footer-first-line {
+        // bottom border for first line
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background-color: #392468;
+        }
+    }
+
+    &__footer-developr {
+        &-link {
+            text-decoration: none;
+            max-width: 320px;
+            padding: 10px;
+            display: grid;
+            gap: 5px;
+            grid-template:
+                "a a"
+                "b c";
+
+            @include sm-and-up {
+                padding: 0px;
+                gap: 14px;
+                grid-template: 'a b c' / auto auto max-content;
+                max-width: none;
+            }
+        }
+        &-title-svg {
+            // TODO: https://github.com/telosnetwork/telos-wallet/issues/614
+            margin-top: 3px;
+            margin-bottom: 5px;
+            place-self: center;
+        }
+        &-title {
+            @include text--small-bold;
+            // font-size: 14px;
+            text-transform: uppercase;
+            grid-area: a;
+            color: $gradientPurple;
+            text-align: center;
+            // font-weight: 600;
+        }
+        &-text {
+            font-size: 16px;
+            grid-area: b;
+            color: white;
+            text-align: left;
+        }
+        &-icon {
+            grid-area: c;
+            color: white;
+            text-align: right;
+        }
+    }
+
     @media only screen and (max-height: 800px) {
         .c-home {
             &__container{

From b1dea5ee5439780a96c5e40137ec1311f48fea25 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 22 Sep 2023 15:26:24 -0300
Subject: [PATCH 255/268] fixing small resolutions

---
 src/css/global/_colors.scss |  20 +++++++
 src/pages/home/HomePage.vue | 101 +++++++++++++++++++++++++++---------
 2 files changed, 96 insertions(+), 25 deletions(-)

diff --git a/src/css/global/_colors.scss b/src/css/global/_colors.scss
index 1f8dba135..61d107328 100644
--- a/src/css/global/_colors.scss
+++ b/src/css/global/_colors.scss
@@ -77,3 +77,23 @@ $saveBtn: #2e1f4f;
 body {
     background-color: var(--bg-color);
 }
+
+@mixin gradient_inline_text($gradient) {
+    background-image: $gradient;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    display: inline;
+}
+
+@mixin gradient_inline_block($gradient) {
+    background-image: $gradient;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    display: inline-block;
+}
+
+@mixin gradient_text() {
+    @include gradient_inline_text(linear-gradient(0.4turn, $gradientblue, $gradientPurple));
+}
\ No newline at end of file
diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index 6c9684094..97b56db92 100644
--- a/src/pages/home/HomePage.vue
+++ b/src/pages/home/HomePage.vue
@@ -18,12 +18,14 @@ export default defineComponent({
         showOAuthOptions: boolean,
         showWalletConnect: boolean,
         useInjectedProvider: string,
+        useHomeSmall: boolean,
     } => ({
         tab: 'left',
         showWalletOptions: false,
         showOAuthOptions: false,
         showWalletConnect: false,
         useInjectedProvider: '',
+        useHomeSmall: false,
     }),
 
     computed: {
@@ -70,13 +72,41 @@ export default defineComponent({
             this.showWalletOptions = show;
         },
     },
+
+    mounted() {
+        setTimeout(() => {
+            // We are going to check if the footer overlaps the external link
+            // If so, we will use a smaller version of the home page
+            const footer = document.querySelector('.c-home__footer');
+            const externalLink = document.querySelector('.c-home__external-link');
+            if (footer && externalLink) {
+                const footerRect = footer.getBoundingClientRect();
+                const externalLinkRect = externalLink.getBoundingClientRect();
+                const footerTop = footerRect.top;
+                const externalLinkBottom = externalLinkRect.bottom;
+                const overlap = footerTop < externalLinkBottom;
+                if (overlap) {
+                    this.useHomeSmall = true;
+                } else {
+                    console.error('Footer height is not greater than external link height');
+                }
+            } else {
+                console.error('Footer or external link not found');
+            }
+        }, 100);
+    },
 });
 </script>
 
 <template>
 <q-layout>
     <q-page-container class="c-home__page-container">
-        <div class="c-home">
+        <div
+            :class="{
+                'c-home': true,
+                'c-home--small': useHomeSmall,
+            }"
+        >
             <div class="c-home__container">
                 <img
                     src="~assets/logo--telos-wallet.svg"
@@ -134,17 +164,32 @@ export default defineComponent({
                     <q-icon size="16px" name="launch" />
                 </div>
                 <q-footer bordered class="c-home__footer">
-                    <q-toolbar class="c-home__footer-first-line bg-dark flex-center">
-                        <a class="c-home__footer-developr-link" href="https://docs.telos.net/evm/cloud-wallet/" target="_blank">
-                            <!-- TODO: https://github.com/telosnetwork/telos-wallet/issues/614 -->
-                            <!-- this DEVELOPER banner is an image as a work-arroun for texts with gradient -->
-                            <!-- div class="c-home__footer-developr-title">{{ $t('home.developers_banner_title') }}</div -->
-                            <img
-                                src="~assets/developer-banner.svg"
-                                class="c-home__footer-developr-title-svg"
-                            >
-                            <div class="c-home__footer-developr-text c-home__external-link-text">{{ $t('home.developers_banner_text') }}</div>
-                            <q-icon class="c-home__footer-developr-icon" size="16px" name="arrow_forward" />
+                    <q-toolbar
+                        :class="{
+                            'c-home__footer-first-line': true,
+                            'bg-dark': true,
+                            'flex-center': true,
+                            'c-home__footer-first-line--small': useHomeSmall,
+                        }"
+                    >
+                        <a
+                            href="https://docs.telos.net/evm/cloud-wallet/"
+                            target="_blank"
+                            :class="{
+                                'c-home__footer-developer-link': true,
+                                'c-home__footer-developer-link--small': useHomeSmall,
+                            }"
+                        >
+                            <div class="c-home__footer-developer-title">
+                                <span class="c-home__footer-developer-title-text">{{ $t('home.developers_banner_title') }}</span>
+                            </div>
+                            <div
+                                :class="{
+                                    'c-home__footer-developer-text': true,
+                                    'c-home__footer-developer-text--small': useHomeSmall,
+                                }"
+                            >{{ $t('home.developers_banner_text') }}</div>
+                            <q-icon class="c-home__footer-developer-icon" size="16px" name="arrow_forward" />
                         </a>
                     </q-toolbar>
                     <q-toolbar class="c-home__footer-second-line bg-dark flex-center">
@@ -254,7 +299,7 @@ export default defineComponent({
         gap: 4px;
 
         margin-top: 24px;
-        color: white
+        color: white;
     }
 
     &__external-link-text {
@@ -286,9 +331,13 @@ export default defineComponent({
             height: 1px;
             background-color: #392468;
         }
+
+        &--small {
+            min-height: 38px;
+        }
     }
 
-    &__footer-developr {
+    &__footer-developer {
         &-link {
             text-decoration: none;
             max-width: 320px;
@@ -305,27 +354,29 @@ export default defineComponent({
                 grid-template: 'a b c' / auto auto max-content;
                 max-width: none;
             }
-        }
-        &-title-svg {
-            // TODO: https://github.com/telosnetwork/telos-wallet/issues/614
-            margin-top: 3px;
-            margin-bottom: 5px;
-            place-self: center;
+
+            &--small {
+                grid-template: 'a c' / auto auto;
+            }
         }
         &-title {
-            @include text--small-bold;
-            // font-size: 14px;
-            text-transform: uppercase;
             grid-area: a;
-            color: $gradientPurple;
             text-align: center;
-            // font-weight: 600;
+            &-text {
+                @include text--small-bold;
+                @include gradient_text;
+                text-transform: uppercase;
+                vertical-align: top;
+            }
         }
         &-text {
             font-size: 16px;
             grid-area: b;
             color: white;
             text-align: left;
+            &--small {
+                display: none;
+            }
         }
         &-icon {
             grid-area: c;

From e33cf8235fc598671026ec0fb88d71a9948ceebc Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 22 Sep 2023 15:30:26 -0300
Subject: [PATCH 256/268] small text style applied

---
 src/pages/home/HomePage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index 97b56db92..435d0c93a 100644
--- a/src/pages/home/HomePage.vue
+++ b/src/pages/home/HomePage.vue
@@ -370,7 +370,7 @@ export default defineComponent({
             }
         }
         &-text {
-            font-size: 16px;
+            @include text--small;
             grid-area: b;
             color: white;
             text-align: left;

From ec30461f765acf68127aa4207234a6d411ceaa14 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 22 Sep 2023 15:43:36 -0300
Subject: [PATCH 257/268] adding subcription to page resize

---
 src/pages/home/HomePage.vue | 41 ++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index 435d0c93a..c9507cf10 100644
--- a/src/pages/home/HomePage.vue
+++ b/src/pages/home/HomePage.vue
@@ -71,29 +71,28 @@ export default defineComponent({
             this.showOAuthOptions = show;
             this.showWalletOptions = show;
         },
+        checkOverlap() {
+            setTimeout(() => {
+                // We are going to check if the footer overlaps the external link
+                // If so, we will use a smaller version of the home page
+                const footer = document.querySelector('.c-home__footer');
+                const externalLink = document.querySelector('.c-home__external-link');
+                if (footer && externalLink) {
+                    const footerRect = footer.getBoundingClientRect();
+                    const externalLinkRect = externalLink.getBoundingClientRect();
+                    const footerTop = footerRect.top;
+                    const externalLinkBottom = externalLinkRect.bottom;
+                    this.useHomeSmall = footerTop < externalLinkBottom;
+                }
+            }, 100);
+        },
     },
-
     mounted() {
-        setTimeout(() => {
-            // We are going to check if the footer overlaps the external link
-            // If so, we will use a smaller version of the home page
-            const footer = document.querySelector('.c-home__footer');
-            const externalLink = document.querySelector('.c-home__external-link');
-            if (footer && externalLink) {
-                const footerRect = footer.getBoundingClientRect();
-                const externalLinkRect = externalLink.getBoundingClientRect();
-                const footerTop = footerRect.top;
-                const externalLinkBottom = externalLinkRect.bottom;
-                const overlap = footerTop < externalLinkBottom;
-                if (overlap) {
-                    this.useHomeSmall = true;
-                } else {
-                    console.error('Footer height is not greater than external link height');
-                }
-            } else {
-                console.error('Footer or external link not found');
-            }
-        }, 100);
+        this.checkOverlap();
+        window.addEventListener('resize', this.checkOverlap);
+    },
+    beforeUnmount() {
+        window.removeEventListener('resize', this.checkOverlap);
     },
 });
 </script>

From 49eb5766dc45ce7c9141e2c6a4747ade9834cc5f Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 25 Sep 2023 09:50:33 -0300
Subject: [PATCH 258/268] c-home now is flex driven

---
 src/pages/home/HomePage.vue | 51 ++++++++-----------------------------
 1 file changed, 11 insertions(+), 40 deletions(-)

diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index c9507cf10..6018a3e3a 100644
--- a/src/pages/home/HomePage.vue
+++ b/src/pages/home/HomePage.vue
@@ -71,28 +71,6 @@ export default defineComponent({
             this.showOAuthOptions = show;
             this.showWalletOptions = show;
         },
-        checkOverlap() {
-            setTimeout(() => {
-                // We are going to check if the footer overlaps the external link
-                // If so, we will use a smaller version of the home page
-                const footer = document.querySelector('.c-home__footer');
-                const externalLink = document.querySelector('.c-home__external-link');
-                if (footer && externalLink) {
-                    const footerRect = footer.getBoundingClientRect();
-                    const externalLinkRect = externalLink.getBoundingClientRect();
-                    const footerTop = footerRect.top;
-                    const externalLinkBottom = externalLinkRect.bottom;
-                    this.useHomeSmall = footerTop < externalLinkBottom;
-                }
-            }, 100);
-        },
-    },
-    mounted() {
-        this.checkOverlap();
-        window.addEventListener('resize', this.checkOverlap);
-    },
-    beforeUnmount() {
-        window.removeEventListener('resize', this.checkOverlap);
     },
 });
 </script>
@@ -222,43 +200,35 @@ export default defineComponent({
     position: relative;
     background: $site-gradient;
     min-height: 100vh;
+    display: flex;
 
     &__page-container {
-        // override inline style of unknown origin
+        // override inline style of unknown origin (do not delete)
         padding-bottom: 0 !important;
     }
 
     &__container {
+        flex-grow: 1;
         display: flex;
         flex-direction: column;
-        padding: 32px 24px 0;
-        min-height: 40rem;
+        padding-top: 32px;
+        align-items: stretch;
+        justify-content: space-between;
     }
 
     &__logo {
         width: 240px;
-        margin: 0 auto;
-
-        @include sm-and-up {
-            margin: 128px auto 88px;
-        }
-
-        @include mobile-landscape {
-            margin: 60px auto 88px;
-        }
+        align-self: center;
+        flex-grow: 1;
 
     }
 
     &__button-container {
+        align-self: center;
         border-radius: 4px;
         padding: 24px;
         background-color: rgba(white, 0.1);
         max-width: 320px;
-        margin: auto;
-        @include mobile-landscape {
-            // footer height + margin
-            margin: auto auto 90px;
-        }
     }
 
     &__network-toggle-container {
@@ -291,6 +261,7 @@ export default defineComponent({
     }
 
     &__external-link {
+        flex-grow: 1;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -313,7 +284,7 @@ export default defineComponent({
 
     // guarantees wallet connect on top of footer
     &__footer {
-        z-index: $z-index--footer;
+        position: relative;
     }
     &__connect-wallet {
         z-index: $z-index--connect-wallet-popup;

From ee55bb93557dc4cc8543efe9d82fde14a0c79654 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 25 Sep 2023 09:51:39 -0300
Subject: [PATCH 259/268] removing unnecessary banner image

---
 src/assets/developer-banner.svg | 9 ---------
 1 file changed, 9 deletions(-)
 delete mode 100644 src/assets/developer-banner.svg

diff --git a/src/assets/developer-banner.svg b/src/assets/developer-banner.svg
deleted file mode 100644
index 204c16a62..000000000
--- a/src/assets/developer-banner.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="80" height="11" viewBox="0 0 80 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.107422 10.5V0.697266H3.40918C4.17936 0.697266 4.87891 0.818034 5.50781 1.05957C6.13672 1.29655 6.66081 1.63151 7.08008 2.06445C7.50391 2.49284 7.82975 3.00781 8.05762 3.60938C8.29004 4.20638 8.40625 4.86035 8.40625 5.57129C8.40625 7.09342 7.96191 8.29655 7.07324 9.18066C6.18913 10.0602 4.96777 10.5 3.40918 10.5H0.107422ZM1.9668 8.87305H3.34082C3.78288 8.87305 4.18848 8.80697 4.55762 8.6748C4.93132 8.54264 5.26172 8.34668 5.54883 8.08691C5.84049 7.82715 6.06836 7.48307 6.23242 7.05469C6.39648 6.62174 6.47852 6.12728 6.47852 5.57129C6.47852 4.86035 6.33496 4.25651 6.04785 3.75977C5.7653 3.26302 5.3916 2.90072 4.92676 2.67285C4.46191 2.44043 3.93327 2.32422 3.34082 2.32422H1.9668V8.87305ZM10.3952 10.5V0.697266H16.3972V2.31055H12.2546V4.74414H15.7956V6.34375H12.2546V8.88672H16.5407V10.5H10.3952ZM17.6274 0.697266H19.685L22.187 8.08008H22.2895L24.8188 0.697266H26.8764L23.2123 10.5H21.2504L17.6274 0.697266ZM28.4826 10.5V0.697266H34.4845V2.31055H30.342V4.74414H33.883V6.34375H30.342V8.88672H34.6281V10.5H28.4826ZM36.6102 10.5V0.697266H38.4696V8.8457H42.4345V10.5H36.6102ZM43.2477 5.59863C43.2477 4.65072 43.471 3.78939 43.9176 3.01465C44.3642 2.23535 44.9817 1.62467 45.7701 1.18262C46.5585 0.74056 47.4404 0.519531 48.4156 0.519531C49.1448 0.519531 49.8284 0.651693 50.4664 0.916016C51.109 1.17578 51.6559 1.53125 52.107 1.98242C52.5628 2.43359 52.9205 2.97363 53.1803 3.60254C53.4446 4.22689 53.5768 4.89225 53.5768 5.59863C53.5768 6.54655 53.3535 7.41016 52.9068 8.18945C52.4602 8.96419 51.8404 9.57487 51.0475 10.0215C50.2591 10.4635 49.3772 10.6846 48.402 10.6846C47.4267 10.6846 46.5449 10.4658 45.7564 10.0283C44.9726 9.58626 44.3574 8.97786 43.9107 8.20312C43.4687 7.42383 43.2477 6.55566 43.2477 5.59863ZM45.1822 5.59863C45.1822 6.55566 45.4853 7.34635 46.0914 7.9707C46.7021 8.59505 47.4768 8.90723 48.4156 8.90723C49.3499 8.90723 50.1201 8.59505 50.7262 7.9707C51.3323 7.34635 51.6354 6.55566 51.6354 5.59863C51.6354 4.65527 51.33 3.86914 50.7193 3.24023C50.1132 2.61133 49.3453 2.29688 48.4156 2.29688C47.4768 2.29688 46.7021 2.61133 46.0914 3.24023C45.4853 3.86914 45.1822 4.65527 45.1822 5.59863ZM55.5726 10.5V0.697266H59.2845C60.2324 0.697266 61.014 0.991211 61.6292 1.5791C62.249 2.16699 62.5589 2.92806 62.5589 3.8623C62.5589 4.46842 62.4131 5.01758 62.1214 5.50977C61.8297 6.00195 61.4333 6.38477 60.932 6.6582C60.4352 6.93164 59.8861 7.06836 59.2845 7.06836H57.432V10.5H55.5726ZM57.432 5.47559H59.0863C59.5511 5.47559 59.9271 5.32747 60.2142 5.03125C60.5058 4.73047 60.6517 4.34082 60.6517 3.8623C60.6517 3.3929 60.5081 3.01465 60.221 2.72754C59.9339 2.44043 59.5557 2.29688 59.0863 2.29688H57.432V5.47559ZM64.3702 10.5V0.697266H70.3721V2.31055H66.2295V4.74414H69.7705V6.34375H66.2295V8.88672H70.5157V10.5H64.3702ZM72.4978 10.5V0.697266H76.1619C77.1645 0.697266 77.978 0.986654 78.6023 1.56543C79.2267 2.14421 79.5388 2.89616 79.5388 3.82129C79.5388 4.47754 79.3679 5.05859 79.0261 5.56445C78.6889 6.06576 78.2491 6.43717 77.7068 6.67871L79.8601 10.5H77.7752L75.9431 7H74.3572V10.5H72.4978ZM74.3572 5.40723H76.0252C76.5037 5.40723 76.891 5.27051 77.1873 4.99707C77.4835 4.71908 77.6316 4.32715 77.6316 3.82129C77.6316 3.37012 77.4858 3.00326 77.1941 2.7207C76.907 2.43815 76.5082 2.29688 75.9978 2.29688H74.3572V5.40723Z" fill="url(#paint0_linear_2334_17512)"/>
-<defs>
-<linearGradient id="paint0_linear_2334_17512" x1="-1" y1="-4.5" x2="36.8396" y2="39.6345" gradientUnits="userSpaceOnUse">
-<stop stop-color="#73E6FF"/>
-<stop offset="1" stop-color="#C4A2EF"/>
-</linearGradient>
-</defs>
-</svg>

From 42f79fdeee64c1bec6fffcbdad8ed7b8ff84c333 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 25 Sep 2023 09:59:27 -0300
Subject: [PATCH 260/268] removing non-used variable

---
 src/pages/home/HomePage.vue | 30 ++++--------------------------
 1 file changed, 4 insertions(+), 26 deletions(-)

diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index 6018a3e3a..19ba5f017 100644
--- a/src/pages/home/HomePage.vue
+++ b/src/pages/home/HomePage.vue
@@ -18,14 +18,12 @@ export default defineComponent({
         showOAuthOptions: boolean,
         showWalletConnect: boolean,
         useInjectedProvider: string,
-        useHomeSmall: boolean,
     } => ({
         tab: 'left',
         showWalletOptions: false,
         showOAuthOptions: false,
         showWalletConnect: false,
         useInjectedProvider: '',
-        useHomeSmall: false,
     }),
 
     computed: {
@@ -78,12 +76,7 @@ export default defineComponent({
 <template>
 <q-layout>
     <q-page-container class="c-home__page-container">
-        <div
-            :class="{
-                'c-home': true,
-                'c-home--small': useHomeSmall,
-            }"
-        >
+        <div class="c-home">
             <div class="c-home__container">
                 <img
                     src="~assets/logo--telos-wallet.svg"
@@ -141,31 +134,16 @@ export default defineComponent({
                     <q-icon size="16px" name="launch" />
                 </div>
                 <q-footer bordered class="c-home__footer">
-                    <q-toolbar
-                        :class="{
-                            'c-home__footer-first-line': true,
-                            'bg-dark': true,
-                            'flex-center': true,
-                            'c-home__footer-first-line--small': useHomeSmall,
-                        }"
-                    >
+                    <q-toolbar class="c-home__footer-first-line bg-dark flex-center">
                         <a
                             href="https://docs.telos.net/evm/cloud-wallet/"
                             target="_blank"
-                            :class="{
-                                'c-home__footer-developer-link': true,
-                                'c-home__footer-developer-link--small': useHomeSmall,
-                            }"
+                            class="c-home__footer-developer-link"
                         >
                             <div class="c-home__footer-developer-title">
                                 <span class="c-home__footer-developer-title-text">{{ $t('home.developers_banner_title') }}</span>
                             </div>
-                            <div
-                                :class="{
-                                    'c-home__footer-developer-text': true,
-                                    'c-home__footer-developer-text--small': useHomeSmall,
-                                }"
-                            >{{ $t('home.developers_banner_text') }}</div>
+                            <div class="c-home__footer-developer-text">{{ $t('home.developers_banner_text') }}</div>
                             <q-icon class="c-home__footer-developer-icon" size="16px" name="arrow_forward" />
                         </a>
                     </q-toolbar>

From fa7a7a9fedd4465a5dcae5f8217cdee2a4c99775 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 25 Sep 2023 11:07:56 -0300
Subject: [PATCH 261/268] fallback solution works when indexer is down

---
 src/antelope/chains/EVMChainSettings.ts       | 19 ++++++++++---------
 .../chains/evm/telos-evm-testnet/index.ts     |  2 +-
 src/antelope/chains/evm/telos-evm/index.ts    |  2 +-
 src/antelope/stores/balances.ts               |  3 +++
 src/api/price.ts                              |  1 +
 5 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/antelope/chains/EVMChainSettings.ts b/src/antelope/chains/EVMChainSettings.ts
index 3e266a2cf..269d7633d 100644
--- a/src/antelope/chains/EVMChainSettings.ts
+++ b/src/antelope/chains/EVMChainSettings.ts
@@ -103,8 +103,8 @@ export default abstract class EVMChainSettings implements ChainSettings {
 
         // Check indexer health state periodically
         this.initPromise = new Promise((resolve) => {
-            this.updateIndexerHealthState().then(() => {
-                // we resolve the promise that will be returned by init()
+            this.updateIndexerHealthState().finally(() => {
+                // we resolve the promise (in any case) that will be returned by init()
                 resolve();
             });
         });
@@ -123,8 +123,13 @@ export default abstract class EVMChainSettings implements ChainSettings {
 
         // this setTimeout is a work arround because we can't call getAntelope() function before it initializes
         setTimeout(() => {
-            setInterval(() => {
-                this.updateIndexerHealthState();
+            const timer = setInterval(async () => {
+                try {
+                    await this.updateIndexerHealthState();
+                } catch (e) {
+                    clearInterval(timer);
+                    console.error('Indexer API not working for this chain:', this.getNetwork(), e);
+                }
             }, getAntelope().config.indexerHealthCheckInterval);
         }, 1000);
 
@@ -162,11 +167,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
                         this.indexer.get('/v1/health') :
                         Promise.resolve({ data: this.deathHealthResponse } as AxiosResponse<IndexerHealthResponse>),
                 )
-                .then(response => response.data as unknown as IndexerHealthResponse)
-                .catch((error) => {
-                    console.error('Indexer API not working for this chain:', this.getNetwork(), error);
-                    return this.deathHealthResponse as IndexerHealthResponse;
-                });
+                .then(response => response.data as unknown as IndexerHealthResponse);
 
         // initial state
         this._indexerHealthState = {
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index 4c2ed6eef..12b158290 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -98,7 +98,7 @@ export default class TelosEVMTestnet extends EVMChainSettings {
     }
 
     async getUsdPrice(): Promise<number> {
-        if (this.hasIndexerSupport()) {
+        if (this.hasIndexerSupport() && this.isIndexerHealthy()) {
             const nativeTokenSymbol = this.getSystemToken().symbol;
             const fiatCode = useUserStore().fiatCurrency;
             const fiatPrice = await getFiatPriceFromIndexer(nativeTokenSymbol, NativeCurrencyAddress, fiatCode, this.indexer, this);
diff --git a/src/antelope/chains/evm/telos-evm/index.ts b/src/antelope/chains/evm/telos-evm/index.ts
index c4e4acdf9..5faadb8b6 100644
--- a/src/antelope/chains/evm/telos-evm/index.ts
+++ b/src/antelope/chains/evm/telos-evm/index.ts
@@ -98,7 +98,7 @@ export default class TelosEVMTestnet extends EVMChainSettings {
     }
 
     async getUsdPrice(): Promise<number> {
-        if (this.hasIndexerSupport()) {
+        if (this.hasIndexerSupport() && this.isIndexerHealthy()) {
             const nativeTokenSymbol = this.getSystemToken().symbol;
             const fiatCode = useUserStore().fiatCurrency;
             const fiatPrice = await getFiatPriceFromIndexer(nativeTokenSymbol, NativeCurrencyAddress, fiatCode, this.indexer, this);
diff --git a/src/antelope/stores/balances.ts b/src/antelope/stores/balances.ts
index 94c015c7d..ea66ba2a7 100644
--- a/src/antelope/stores/balances.ts
+++ b/src/antelope/stores/balances.ts
@@ -147,6 +147,7 @@ export const useBalancesStore = defineStore(store_name, {
                             this.trace('updateBalancesForAccount', 'Indexer is NOT healthy!', chain_settings.getNetwork(), toRaw(chain_settings.indexerHealthState));
                             // In case the chain does not support index, we need to fetch the balances using Web3
                             await this.updateSystemTokensPrices(label);
+                            this.trace('updateBalancesForAccount', 'chain_settings.getTokenList()');
                             const tokens = await chain_settings.getTokenList();
                             await this.updateSystemBalanceForAccount(label, account.account as addressString);
                             this.trace('updateBalancesForAccount', 'tokens:', toRaw(tokens));
@@ -183,7 +184,9 @@ export const useBalancesStore = defineStore(store_name, {
                 const wrpToken = chain_settings.getWrappedSystemToken();
 
                 // get the price for both system and wrapped tokens
+                this.trace('updateSystemTokensPrices', 'await chain_settings.getUsdPrice()');
                 const price = (await chain_settings.getUsdPrice()).toString();
+                this.trace('updateSystemTokensPrices', 'price:', price);
                 const marketInfo = { price } as MarketSourceInfo;
                 sysToken.market = new TokenMarketData(marketInfo);
                 wrpToken.market = new TokenMarketData(marketInfo);
diff --git a/src/api/price.ts b/src/api/price.ts
index 48843f784..8d315d2dc 100644
--- a/src/api/price.ts
+++ b/src/api/price.ts
@@ -21,6 +21,7 @@ const priceCache: { [tokenId: string]: CachedPrice } = {};
 export const getCoingeckoUsdPrice = async (
     tokenId: string,
 ): Promise<number> => {
+    console.log('getCoingeckoUsdPrice()', tokenId);
     const now = Date.now();
 
     if (priceCache[tokenId] &&

From 69ff1dc1ece7a43d2150b47f4b584c9449cc0371 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Mon, 25 Sep 2023 11:19:59 -0300
Subject: [PATCH 262/268] removing console logs

---
 src/antelope/wallets/authenticators/InjectedProviderAuth.ts | 4 ++--
 src/api/price.ts                                            | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
index 0997ce19f..212522613 100644
--- a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
+++ b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
@@ -83,7 +83,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
             const wethContract = new ethers.Contract(wrappedSystemTokenContractAddress, wtlosAbiDeposit, signer);
 
             if (!wethContract) {
-                console.log('wrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
+                console.debug('wrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
                 throw 'Unable to get wrapped system contract instance';
             }
             wrappedSystemTokenContractInstance = wethContract;
@@ -114,7 +114,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
             const wrappedSystemTokenContract = new ethers.Contract(wrappedSystemTokenContractAddress, wtlosAbiWithdraw, signer);
 
             if (!wrappedSystemTokenContract) {
-                console.log('unwrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
+                console.debug('unwrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
                 throw 'Unable to get wrapped system contract instance';
             }
             wrappedSystemTokenContractInstance = wrappedSystemTokenContract;
diff --git a/src/api/price.ts b/src/api/price.ts
index 8d315d2dc..48843f784 100644
--- a/src/api/price.ts
+++ b/src/api/price.ts
@@ -21,7 +21,6 @@ const priceCache: { [tokenId: string]: CachedPrice } = {};
 export const getCoingeckoUsdPrice = async (
     tokenId: string,
 ): Promise<number> => {
-    console.log('getCoingeckoUsdPrice()', tokenId);
     const now = Date.now();
 
     if (priceCache[tokenId] &&

From 238f1df47007ad1b07f0af0772559b0f3858e76b Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 26 Sep 2023 11:39:33 -0300
Subject: [PATCH 263/268] removing console logs

---
 src/antelope/wallets/authenticators/InjectedProviderAuth.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
index 212522613..38227995a 100644
--- a/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
+++ b/src/antelope/wallets/authenticators/InjectedProviderAuth.ts
@@ -83,7 +83,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
             const wethContract = new ethers.Contract(wrappedSystemTokenContractAddress, wtlosAbiDeposit, signer);
 
             if (!wethContract) {
-                console.debug('wrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
+                this.trace('wrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
                 throw 'Unable to get wrapped system contract instance';
             }
             wrappedSystemTokenContractInstance = wethContract;
@@ -114,7 +114,7 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
             const wrappedSystemTokenContract = new ethers.Contract(wrappedSystemTokenContractAddress, wtlosAbiWithdraw, signer);
 
             if (!wrappedSystemTokenContract) {
-                console.debug('unwrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
+                this.trace('unwrapSystemToken', 'address:', wrappedSystemTokenContractAddress, 'signer:', signer);
                 throw 'Unable to get wrapped system contract instance';
             }
             wrappedSystemTokenContractInstance = wrappedSystemTokenContract;

From 1c23721b887d1b94c29297a6501f16a7eaab6597 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 26 Sep 2023 17:33:09 -0300
Subject: [PATCH 264/268] restoring missing mixin

---
 src/css/global/_colors.scss | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/css/global/_colors.scss b/src/css/global/_colors.scss
index 0dcdb0fdc..85f58d0ef 100644
--- a/src/css/global/_colors.scss
+++ b/src/css/global/_colors.scss
@@ -80,6 +80,26 @@ body {
     background-color: var(--bg-color);
 }
 
+@mixin gradient_inline_text($gradient) {
+    background-image: $gradient;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    display: inline;
+}
+
+@mixin gradient_inline_block($gradient) {
+    background-image: $gradient;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    display: inline-block;
+}
+
+@mixin gradient_text() {
+    @include gradient_inline_text(linear-gradient(0.4turn, $gradientblue, $gradientPurple));
+}
+
 /** 
  * This creates the ilusion of a gradient border using a background with 5 layers.
  * The first four layers are the four borders, and the last layer is the background.

From 9f78c7c27b38b08eeebf607107aadcba70b218c1 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 27 Sep 2023 22:27:34 +0000
Subject: [PATCH 265/268] Bump get-func-name from 2.0.0 to 2.0.2

Bumps [get-func-name](https://github.com/chaijs/get-func-name) from 2.0.0 to 2.0.2.
- [Release notes](https://github.com/chaijs/get-func-name/releases)
- [Commits](https://github.com/chaijs/get-func-name/commits/v2.0.2)

---
updated-dependencies:
- dependency-name: get-func-name
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 182eb14b1..bd6fc40ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7981,9 +7981,9 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
 get-func-name@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
-  integrity sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41"
+  integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==
 
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
   version "1.1.3"

From 19ee1ac355a115faacf41c601478ec3ec5622f00 Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Fri, 29 Sep 2023 20:00:14 -0500
Subject: [PATCH 266/268] fix: add placeholder for native side to maintain
 styling

---
 src/pages/home/HomePage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index 321ab2147..e63e475fe 100644
--- a/src/pages/home/HomePage.vue
+++ b/src/pages/home/HomePage.vue
@@ -105,6 +105,7 @@ export default defineComponent({
                     </a>
                     <q-icon size="16px" name="launch" />
                 </div>
+                <div v-else class="c-home__external-link"></div> /** placeholder to maintain styling for native */
                 <q-footer bordered class="c-home__footer">
                     <q-toolbar class="c-home__footer-first-line bg-dark flex-center">
                         <a

From c673cef3ea8f64efe253465887e2b03a1ce8e0bf Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Mon, 2 Oct 2023 10:33:14 -0500
Subject: [PATCH 267/268] fix: display web wallet doc link for native

---
 src/pages/home/HomePage.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index e63e475fe..7ca1b3dd9 100644
--- a/src/pages/home/HomePage.vue
+++ b/src/pages/home/HomePage.vue
@@ -95,7 +95,7 @@ export default defineComponent({
                         v-model="currentMenu"
                     />
                 </div>
-                <div v-if="tab === 'left'" class="c-home__external-link">
+                <div class="c-home__external-link">
                     <a
                         href="https://docs.telos.net/evm/about/setup-a-wallet"
                         target="_blank"
@@ -105,7 +105,6 @@ export default defineComponent({
                     </a>
                     <q-icon size="16px" name="launch" />
                 </div>
-                <div v-else class="c-home__external-link"></div> /** placeholder to maintain styling for native */
                 <q-footer bordered class="c-home__footer">
                     <q-toolbar class="c-home__footer-first-line bg-dark flex-center">
                         <a

From 62b7991770fe694720250ea51c20ff6b9ff5c8de Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Mon, 2 Oct 2023 10:37:33 -0500
Subject: [PATCH 268/268] chore: bump version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e79df8c97..cf613708b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "telos-web-wallet",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A Web Wallet for Telos",
   "productName": "Telos Web Wallet",
   "private": true,