Merge branch 'develop' of https://github.com/telosnetwork/telos-wallet

telosnetwork · Jan 9, 2024 · 958b1d1 · 958b1d1
2 parents e064f17 + e7f5c74
commit 958b1d1
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 21 deletions.
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
@@ -572,6 +572,7 @@ export default {
         'LOSS OF FUNDS. THIS PRIVATE KEY IS NOT AVAILABLE.',
         i_understand: 'I Understand',
         copied_ok: 'Copied it to the clipboard successfully',
+        balance_fiat_tooltip: 'Total includes non-liquid TLOS, such as TLOS staked to resources',
     },
     dapps: {
         title: 'Telos Native dApps',

diff --git a/src/pages/native/BalanceInfo.vue b/src/pages/native/BalanceInfo.vue
@@ -104,6 +104,9 @@ export default {
                 )
                 .reduce((a, b) => a + b, 0);
         },
+        telosBalance() {
+            return this.coins.find(coin => coin.symbol === 'TLOS' && coin.account === 'eosio.token').totalAmount;
+        },
         availableHeight() {
             return (
                 window.innerHeight - (this.isAuthenticated ? this.footerHeight : 0)
@@ -700,7 +703,7 @@ export default {
                 <!-- Account Amount -->
                 <div class="full-width items-center balance-div row">
                     <div class="full-width"></div>
-                    <div class="full-width">
+                    <div class="full-width balance-text">
                         <label
                             class="text-white items-center"
                             :style="`font-size: ${balanceTextSize}px; font-weight: 200; font-size: 50px; white-space: nowrap;`"
@@ -709,6 +712,13 @@ export default {
                                 displayAmount.toFixed(2).slice(-2)
                             }}
                         </label>
+                        <div>
+                            <q-icon name="o_info" size="sm" />
+                            <q-tooltip>{{ $t('balance.balance_fiat_tooltip') }}</q-tooltip>
+                        </div>
+                    </div>
+                    <div v-if="typeof telosBalance === 'number'"  class="full-width">
+                        {{ getFixed(telosBalance, 4) }} TLOS
                     </div>
                 </div>
 
@@ -979,6 +989,13 @@ export default {
   justify-content: space-between;
 }
 
+.balance-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+}
+
 .balanceBtn {
   margin-right: 0.5vw;
   margin-left: 0.5vw;

diff --git a/src/pages/native/balance/CoinInfo.vue b/src/pages/native/balance/CoinInfo.vue
@@ -19,6 +19,7 @@ export default {
         'suggestTokens',
     ],
     computed: {
+        ...mapGetters('account', ['data']),
         availableCoins() {
             return this.coins.filter(
                 coin =>
@@ -43,6 +44,17 @@ export default {
         withdrawEvm() {
             this.$emit('update:showWithdrawEVMDlg', true);
         },
+        coinIsTelosNative(coin) {
+            return coin.symbol === 'TLOS' && coin.account === 'eosio.token' && coin.network !== 'tevm';
+        },
+        formatLiquidBalance(balance) {
+            const [amount, symbol] = balance.split(' ');
+            return `${this.getFixed(amount, 4)} ${symbol}`;
+        },
+        getLiquidBalance(balance) {
+            const [amount] = balance.split(' ');
+            return Number(amount);
+        },
     },
 };
 </script>
@@ -98,11 +110,7 @@ export default {
                     <img src="~assets/icons/networkArrows.svg" >
                 </q-btn>
                 <q-btn
-                    v-if="
-                        coin.symbol === 'TLOS' &&
-                            coin.account === 'eosio.token' &&
-                            coin.network !== 'tevm'
-                    "
+                    v-if="coinIsTelosNative(coin)"
                     class="tevmBtn"
                     flat
                     rounded
@@ -115,23 +123,38 @@ export default {
             </div>
             <q-item-section>
                 <div class="text-white text-right display-grid">
-                    <label class="text-subtitle1 text-weight-small text-white h-20">{{
-                        `${getFixed(
-                            !coin.totalAmount ? coin.amount : coin.totalAmount,
-                            8
-                        )} ${coin.symbol}`
-                    }}</label>
+                    <label class="text-subtitle1 text-weight-small text-white h-20">
+                        <template v-if="coinIsTelosNative(coin) && data">
+                            {{ formatLiquidBalance(data.core_liquid_balance) }}
+                        </template>
+                        <template v-else>
+                            {{
+                                `${getFixed(
+                                    !coin.totalAmount ? coin.amount : coin.totalAmount,
+                                    8
+                                )} ${coin.symbol}`
+                            }}
+                        </template>
+                    </label>
                     <label
                         v-if="coin.price !== 0"
                         class="text-caption text-grey-6"
-                    >${{
-                        getFixed(
-                            !coin.totalAmount
-                                ? coin.amount * coin.price
-                                : coin.totalAmount * coin.price,
-                            2
-                        )
-                    }}</label>
+                    >
+                        $
+                        <template v-if="coinIsTelosNative(coin) && data">
+                            {{ getFixed(coin.price * getLiquidBalance(data.core_liquid_balance), 2) }}
+                        </template>
+                        <template v-else>
+                            {{
+                                getFixed(
+                                    !coin.totalAmount
+                                        ? coin.amount * coin.price
+                                        : coin.totalAmount * coin.price,
+                                    2
+                                )
+                            }}
+                        </template>
+                    </label>
                 </div>
             </q-item-section>
         </div>

diff --git a/src/pages/native/balance/SendCoins.vue b/src/pages/native/balance/SendCoins.vue
@@ -21,7 +21,23 @@ export default {
             ));
         },
         availableCoins() {
-            return this.coins.filter(coin => coin.amount > 0);
+            let filteredCoins = this.coins.filter(coin => coin.amount > 0);
+
+            if (filteredCoins.findIndex(coin => coin.symbol === 'TLOS' && coin.account === 'eosio.token') === -1) {
+                filteredCoins = [{
+                    name: 'Telos',
+                    symbol: 'TLOS',
+                    amount: 0,
+                    price: 0,
+                    icon: 'telos',
+                    network: 'eos',
+                }, ...filteredCoins];
+            }
+
+            return filteredCoins;
+        },
+        showEmptyTelos() {
+            return this.availableCoins.findIndex(coin => coin.symbol === 'TLOS' && coin.account === 'eosio.token') === -1;
         },
         showDlg: {
             get() {
@@ -34,6 +50,9 @@ export default {
     },
     methods: {
         selectCoin(coin) {
+            if (this.showEmptyTelos) {
+                return;
+            }
             this.$emit('update:showSendAmountDlg', true);
             this.$emit('update:selectedCoin', coin);
         },