From 2ea205070401404da830b7592a845f7cd26aa1d2 Mon Sep 17 00:00:00 2001
From: Vitaliy Sulimenko <prevetal@gmail.com>
Date: Wed, 31 Jan 2024 20:56:26 +0100
Subject: [PATCH] Update 31.01.2024

---
 package-lock.json                        |  11 --
 package.json                             |   1 -
 public/css/styles.css                    |   2 +-
 src/components/Header.vue                |  20 ++-
 src/components/account/Networks.vue      |  29 ++--
 src/components/account/ProposalsItem.vue |  10 +-
 src/components/account/Stats.vue         |  83 ++++++++++--
 src/components/account/Validators.vue    |   6 +-
 src/components/modal/ValidatorModal.vue  |  66 +++++----
 src/components/proposal/Depositors.vue   |   5 +-
 src/components/proposal/ProposalInfo.vue | 163 +++++++++++------------
 src/views/Account.vue                    |   2 +
 src/views/Proposals.vue                  |  82 +++++-------
 13 files changed, 256 insertions(+), 224 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 23bb549..41f1817 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,6 @@
 				"core-js": "^3.8.3",
 				"detect.js": "^2.2.3",
 				"gh-pages": "^4.0.0",
-				"hc-sticky": "^2.2.7",
 				"html-to-image": "^1.11.11",
 				"marked": "^5.0.2",
 				"mitt": "^3.0.0",
@@ -7182,11 +7181,6 @@
 				"minimalistic-assert": "^1.0.1"
 			}
 		},
-		"node_modules/hc-sticky": {
-			"version": "2.2.7",
-			"resolved": "https://registry.npmjs.org/hc-sticky/-/hc-sticky-2.2.7.tgz",
-			"integrity": "sha512-xGEvtKqwztK3xC5a26U0ZNLu8bNMP378ZPuEfHRxHtQCsT/Y0Kg7BG3w02oWuD46ecOWUioUZoJAXT2tJs3Q7Q=="
-		},
 		"node_modules/he": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -18116,11 +18110,6 @@
 				"minimalistic-assert": "^1.0.1"
 			}
 		},
-		"hc-sticky": {
-			"version": "2.2.7",
-			"resolved": "https://registry.npmjs.org/hc-sticky/-/hc-sticky-2.2.7.tgz",
-			"integrity": "sha512-xGEvtKqwztK3xC5a26U0ZNLu8bNMP378ZPuEfHRxHtQCsT/Y0Kg7BG3w02oWuD46ecOWUioUZoJAXT2tJs3Q7Q=="
-		},
 		"he": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
diff --git a/package.json b/package.json
index 974b94a..185cb27 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
 		"core-js": "^3.8.3",
 		"detect.js": "^2.2.3",
 		"gh-pages": "^4.0.0",
-		"hc-sticky": "^2.2.7",
 		"html-to-image": "^1.11.11",
 		"marked": "^5.0.2",
 		"mitt": "^3.0.0",
diff --git a/public/css/styles.css b/public/css/styles.css
index d929428..79696e2 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -203,7 +203,7 @@ button
     z-index: 9;
 
     display: flex;
-    overflow: hidden;
+    overflow: clip;
     flex-direction: column;
 
     min-width: 360px;
diff --git a/src/components/Header.vue b/src/components/Header.vue
index cd7991f..af210fb 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -123,14 +123,14 @@
 
     header .info
     {
+        align-content: center;
+        align-items: center;
+        justify-content: space-between;
+
         min-height: 105px;
         padding: 11px 20px;
 
         border-radius: 42px;
-
-        align-content: center;
-        align-items: center;
-        justify-content: space-between;
     }
 
 
@@ -147,13 +147,12 @@
     header .logo .btn
     {
         display: flex;
-
-        cursor: pointer;
-
-        justify-content: flex-start;
-        align-items: center;
         align-content: center;
+        align-items: center;
         flex-wrap: wrap;
+        justify-content: flex-start;
+
+        cursor: pointer;
     }
 
 
@@ -198,8 +197,6 @@
 
     header .logo .mini_modal a
     {
-        color: currentColor;
-
         display: block;
 
         padding: 6px 10px 6px 4px;
@@ -207,6 +204,7 @@
         transition: background .2s linear;
         text-decoration: none;
 
+        color: currentColor;
         border-radius: 8px;
     }
 
diff --git a/src/components/account/Networks.vue b/src/components/account/Networks.vue
index 1798146..212670d 100644
--- a/src/components/account/Networks.vue
+++ b/src/components/account/Networks.vue
@@ -50,6 +50,9 @@
 <style scoped>
     .networks
     {
+        position: sticky;
+        top: 118px;
+
         padding: 14px;
 
         border-radius: 20px;
@@ -64,15 +67,14 @@
         line-height: 36px;
 
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: flex-start;
 
         margin-bottom: 20px;
 
         pointer-events: none;
-
-        justify-content: flex-start;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
     }
 
     .networks .title > *
@@ -107,21 +109,20 @@
     .networks .network
     {
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: space-between;
 
         width: 100%;
-        text-decoration: none;
-        color: currentColor;
         padding: 10px;
 
         transition: background .2s linear;
         text-align: left;
+        text-decoration: none;
 
+        color: currentColor;
         border-radius: 14px;
-
-        justify-content: space-between;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
     }
 
 
@@ -172,13 +173,14 @@
 
     .networks .token
     {
-        color: #555;
         font-size: 12px;
         line-height: 15px;
 
         margin-top: 6px;
 
         text-transform: uppercase;
+
+        color: #555;
     }
 
 
@@ -299,5 +301,4 @@
             line-height: 26px;
         }
     }
-
 </style>
\ No newline at end of file
diff --git a/src/components/account/ProposalsItem.vue b/src/components/account/ProposalsItem.vue
index 17e98f2..884c377 100644
--- a/src/components/account/ProposalsItem.vue
+++ b/src/components/account/ProposalsItem.vue
@@ -51,7 +51,7 @@
 
         <div class="progress" v-if="props.proposal.status == 'PROPOSAL_STATUS_DEPOSIT_PERIOD'">
             <div class="bar">
-                <div class="violet" :style="`width: ${$filters.toFixed(props.proposal.deposit / Math.pow(10, store.networks[store.currentNetwork].exponent) / store.networks[store.currentNetwork].proposal_need * 100, 2)}%;`"></div>
+                <div class="violet" :style="`width: ${$filters.toFixed(formatTokenAmount(props.proposal.deposit, store.networks[store.currentNetwork].token_name) / store.networks[store.currentNetwork].proposal_need * 100, 2)}%;`"></div>
             </div>
 
             <div class="funds">
@@ -59,8 +59,8 @@
                     <div class="label">{{ $t('message.proposal_deposite_label_collected') }}</div>
 
                     <div class="val">
-                        {{ $filters.toFixed(props.proposal.deposit / Math.pow(10, store.networks[store.currentNetwork].exponent), 0) }}
-                        {{ store.networks[store.currentNetwork].token_name }}
+                        {{ $filters.toFixed(formatTokenAmount(props.proposal.deposit, store.networks[store.currentNetwork].token_name), 0) }}
+                        {{ formatTokenName(store.networks[store.currentNetwork].token_name) }}
                     </div>
                 </div>
 
@@ -69,7 +69,7 @@
 
                     <div class="val">
                         {{ store.networks[store.currentNetwork].proposal_need }}
-                        {{ store.networks[store.currentNetwork].token_name }}
+                        {{ formatTokenName(store.networks[store.currentNetwork].token_name) }}
                     </div>
                 </div>
             </div>
@@ -148,6 +148,8 @@
 <script setup>
     import { useGlobalStore } from '@/stores'
     import { formatTimeAgo } from '@vueuse/core'
+    import { formatTokenName, formatTokenAmount } from '@/utils'
+
 
     const store = useGlobalStore(),
         props = defineProps(['proposal']),
diff --git a/src/components/account/Stats.vue b/src/components/account/Stats.vue
index 78edbc4..f005371 100644
--- a/src/components/account/Stats.vue
+++ b/src/components/account/Stats.vue
@@ -45,7 +45,7 @@
                 </div>
 
                 <div class="val" v-else>
-                    {{ '~' + $filters.toFixed(store.account.totalTokensPrice, 2) }}
+                    {{ '~' + totalTokensPrice }}
 
                     <div class="currency">{{ store.currentCurrency }}</div>
                 </div>
@@ -79,8 +79,9 @@
 
     const store = useGlobalStore(),
         loading = store.demo ? ref(false) : ref(true),
-        totalRewardTokens = !store.demo ? ref(0) : ref(10.016),
         APR = !store.demo ? ref(0) : ref(0.2125),
+        totalRewardTokens = !store.demo ? ref(0) : ref(10.016),
+        totalTokensPrice = !store.demo ? ref(0) : ref(150.18),
         RPDE = !store.demo ? ref(0) : ref(0.4)
 
 
@@ -105,9 +106,14 @@
         // Set loader
         loading.value = true
 
+        // Reset data
+        APR.value = 0
+        totalTokensPrice.value = 0
+        RPDE.value = 0
         store.account.info.RPDE = 0
 
         for (const wallet of store.account.wallets) {
+            // Reset data
             wallet.RPDE = 0
 
             // Get network data
@@ -129,28 +135,89 @@
             store.account.info.RPDE += wallet.RPDE
         }
 
+
         // Set current APR
         if (store.currentNetwork != 'all') {
+            // Get current walllet
             let currentWallet = {}
 
             store.account.currentWallet != 'all'
                 ? currentWallet = store.account.wallets.find(el => el.address == store.account.currentWallet)
                 : currentWallet = store.account.wallets[0]
 
+            // Get current network
             let currentNetwork = currentWallet.networks.find(el => el.name == store.currentNetwork)
 
             // Set current APR
             APR.value = currentNetwork.info.apr
         }
 
-        // Set current RPDE
-        if (store.account.currentWallet != 'all') {
-            // Current wallet
-            let currentWallet = store.account.wallets.find(el => el.address == store.account.currentWallet)
 
-            RPDE.value = currentWallet.RPDE
+        // Set current passport value
+        if (store.account.currentWallet == 'all') {
+            if (store.currentNetwork == 'all') {
+                // Account RPDE
+                totalTokensPrice.value = store.account.totalTokensPrice
+            } else {
+                store.account.wallets.forEach(wallet => {
+                    // Network
+                    let network = wallet.networks.find(el => el.name == store.currentNetwork)
+
+                    // Sum network in all wallets Total tokens price
+                    totalTokensPrice.value += network.totalTokensPrice
+                })
+            }
+        } else {
+            if (store.currentNetwork == 'all') {
+                // Get current walllet
+                let currentWallet = store.account.wallets.find(el => el.address == store.account.currentWallet)
+
+                // Current wallet Total tokens price
+                RPDE.value = currentWallet.totalTokensPrice
+            } else {
+                // Get current walllet
+                let currentWallet = store.account.wallets.find(el => el.address == store.account.currentWallet)
+
+                // Get current network
+                let currentNetwork = currentWallet.networks.find(el => el.name == store.currentNetwork)
+
+                // Current network Total tokens price
+                totalTokensPrice.value = currentNetwork.totalTokensPrice
+            }
+        }
+
+
+        // Set current RPDE
+        if (store.account.currentWallet == 'all') {
+            if (store.currentNetwork == 'all') {
+                // Account RPDE
+                RPDE.value = store.account.info.RPDE
+            } else {
+                store.account.wallets.forEach(wallet => {
+                    // Network
+                    let network = wallet.networks.find(el => el.name == store.currentNetwork)
+
+                    // Sum network in all wallets RPDE
+                    RPDE.value += network.info.RPDE
+                })
+            }
         } else {
-            RPDE.value = store.account.info.RPDE
+            if (store.currentNetwork == 'all') {
+                // Get current walllet
+                let currentWallet = store.account.wallets.find(el => el.address == store.account.currentWallet)
+
+                // Current wallet RPDE
+                RPDE.value = currentWallet.RPDE
+            } else {
+                // Get current walllet
+                let currentWallet = store.account.wallets.find(el => el.address == store.account.currentWallet)
+
+                // Get current network
+                let currentNetwork = currentWallet.networks.find(el => el.name == store.currentNetwork)
+
+                // Current network RPDE
+                RPDE.value = currentNetwork.info.RPDE
+            }
         }
 
 
diff --git a/src/components/account/Validators.vue b/src/components/account/Validators.vue
index b9a6e6d..55bb733 100644
--- a/src/components/account/Validators.vue
+++ b/src/components/account/Validators.vue
@@ -88,8 +88,8 @@
                                 </div>
 
                                 <div class="amount">
-                                    <span>{{ $filters.toFixed(validator.coin.amount / Math.pow(10, store.networks[store.currentNetwork].exponent), 3) }}</span>
-                                    {{ store.networks[store.currentNetwork].token_name }}
+                                    <span>{{ $filters.toFixed(formatTokenAmount(validator.coin.amount, store.networks[store.currentNetwork].token_name), 3) }}</span>
+                                    {{ formatTokenName(store.networks[store.currentNetwork].token_name) }}
                                 </div>
                             </div>
 
@@ -125,7 +125,7 @@
 <script setup>
     import { onBeforeMount, reactive, ref, inject, watch, computed } from 'vue'
     import { useGlobalStore } from '@/stores'
-    import { generateAddress } from '@/utils'
+    import { generateAddress, formatTokenName, formatTokenAmount } from '@/utils'
 
     // Demo data
     import DemoAccountValidators from '@/demo/AccountValidators.json'
diff --git a/src/components/modal/ValidatorModal.vue b/src/components/modal/ValidatorModal.vue
index c3612ea..941d853 100644
--- a/src/components/modal/ValidatorModal.vue
+++ b/src/components/modal/ValidatorModal.vue
@@ -99,10 +99,10 @@
 
                             <div class="val">
                                 <span>
-                                    {{ new Number($filters.toFixed(store.validatorInfo.self_bonded.amount / Math.pow(10, store.networks[store.validatorInfo.network].exponent), 0)).toLocaleString('en-US') }}
+                                    {{ new Number($filters.toFixed(formatTokenAmount(store.validatorInfo.self_bonded.amount, store.networks[store.validatorInfo.network].token_name), 0)).toLocaleString('en-US') }}
                                 </span>
                                 /
-                                <span>{{ $filters.toFixed(store.validatorInfo.self_bonded.amount / Math.pow(10, store.networks[store.validatorInfo.network].exponent) / store.validatorInfo.voting_power * 100, 2) }}%</span>
+                                <span>{{ $filters.toFixed(formatTokenAmount(store.validatorInfo.self_bonded.amount, store.networks[store.validatorInfo.network].token_name) / store.validatorInfo.voting_power * 100, 2) }}%</span>
                             </div>
                         </div>
 
@@ -139,6 +139,7 @@
 <script setup>
     import { inject, onBeforeMount, ref } from 'vue'
     import { useGlobalStore } from '@/stores'
+    import { formatTokenAmount } from '@/utils'
 
 
     const store = useGlobalStore(),
@@ -198,6 +199,10 @@
         position: relative;
 
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: center;
 
         width: 100px;
         min-width: 100px;
@@ -206,11 +211,6 @@
 
         border-radius: 50%;
         background: #fff;
-
-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
     }
 
 
@@ -247,7 +247,6 @@
 
     .power
     {
-        color: #fff;
         font-size: 12px;
         font-weight: 500;
         line-height: 34px;
@@ -263,12 +262,12 @@
         height: 34px;
 
         text-align: center;
+
+        color: #fff;
     }
 
     .power svg
     {
-        color: #950fff;
-
         position: absolute;
         z-index: -1;
         top: 0;
@@ -278,6 +277,8 @@
 
         width: 100%;
         height: 100%;
+
+        color: #950fff;
     }
 
 
@@ -296,13 +297,12 @@
         line-height: 100%;
 
         display: flex;
-
-        min-height: 44px;
-
-        justify-content: flex-start;
-        align-items: center;
         align-content: center;
+        align-items: center;
         flex-wrap: wrap;
+        justify-content: flex-start;
+
+        min-height: 44px;
     }
 
     .info .name > div
@@ -344,6 +344,10 @@
         line-height: 100%;
 
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
 
         padding: 10px 14px;
 
@@ -351,11 +355,6 @@
 
         border-radius: 24px;
         background: #353535;
-
-        justify-content: flex-start;
-        align-items: center;
-        align-content: center;
-        flex-wrap: nowrap;
     }
 
     .active_set.green
@@ -380,15 +379,14 @@
     .btns
     {
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: flex-start;
 
         margin-top: 30px;
         margin-bottom: -8px;
         margin-left: -8px;
-
-        justify-content: flex-start;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
     }
 
     .btns > *
@@ -400,11 +398,14 @@
 
     .btns .link
     {
-        color: currentColor;
         font-size: 14px;
         line-height: 100%;
 
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: center;
 
         min-height: 32px;
         padding: 4px 6px;
@@ -412,13 +413,9 @@
         transition: background .2s linear;
         text-decoration: none;
 
+        color: currentColor;
         border-radius: 10px;
         background: #191919;
-
-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
     }
 
     .btns .link .icon
@@ -480,11 +477,11 @@
 
     .features .row
     {
+        align-content: stretch;
+        align-items: stretch;
+
         margin-bottom: -24px;
         margin-left: -24px;
-
-        align-items: stretch;
-        align-content: stretch;
     }
 
     .features .row > *
@@ -691,5 +688,4 @@
             margin-right: 6px;
         }
     }
-
 </style>
diff --git a/src/components/proposal/Depositors.vue b/src/components/proposal/Depositors.vue
index 79eed03..db302e0 100644
--- a/src/components/proposal/Depositors.vue
+++ b/src/components/proposal/Depositors.vue
@@ -26,8 +26,8 @@
                         </td>
 
                         <td class="amount">
-                            {{ parseInt($filters.toFixed(depositor.coins[0].amount / Math.pow(10, depositor.coins[0].exponent), 6)) }}.<small>{{ $filters.toFixed(depositor.coins[0].amount / Math.pow(10, depositor.coins[0].exponent), 6).split('.')[1] }}</small>
-                            {{ store.networks[props.proposal.network].token_name }}
+                            {{ parseInt($filters.toFixed(formatTokenAmount(depositor.coins[0].amount, store.networks[store.currentNetwork].token_name), 6)) }}.<small>{{ $filters.toFixed(formatTokenAmount(depositor.coins[0].amount, store.networks[store.currentNetwork].token_name), 6).split('.')[1] }}</small>
+                            {{ formatTokenName(store.networks[store.currentNetwork].token_name) }}
                         </td>
 
                         <td class="date">
@@ -49,6 +49,7 @@
 
 <script setup>
     import { useGlobalStore } from '@/stores'
+    import { formatTokenName, formatTokenAmount } from '@/utils'
 
 
     const props = defineProps(['depositors', 'proposal']),
diff --git a/src/components/proposal/ProposalInfo.vue b/src/components/proposal/ProposalInfo.vue
index 7412d7b..6c1ef78 100644
--- a/src/components/proposal/ProposalInfo.vue
+++ b/src/components/proposal/ProposalInfo.vue
@@ -92,9 +92,7 @@
 
             <div class="chart">
                 <div class="percents">
-                    <!-- <span v-if="store.networks[props.proposal.network].proposal_need <= (props.proposal.deposit / Math.pow(10, store.networks[props.proposal.network].exponent))">100%</span>
-                    <span v-else>{{ $filters.toFixed((props.proposal.deposit / Math.pow(10, store.networks[props.proposal.network].exponent)) / store.networks[props.proposal.network].proposal_need * 100, 2) }}%</span> -->
-                    {{ $filters.toFixed((props.proposal.deposit / Math.pow(10, store.networks[props.proposal.network].exponent)) / store.networks[props.proposal.network].proposal_need * 100, 2) }}%
+                    {{ $filters.toFixed(formatTokenAmount(props.proposal.deposit, store.networks[store.currentNetwork].token_name) / store.networks[props.proposal.network].proposal_need * 100, 2) }}%
                 </div>
 
                 <Doughnut ref="chart" :data="chartData" :options="chartOptions" />
@@ -146,8 +144,8 @@
                     <div class="label">{{ $t('message.proposal_details_total_label') }}</div>
 
                     <div class="val">
-                        {{ props.proposal.deposit / Math.pow(10, store.networks[props.proposal.network].exponent) }}
-                        {{ store.networks[props.proposal.network].token_name }}
+                        {{ formatTokenAmount(props.proposal.deposit, store.networks[store.currentNetwork].token_name) }}
+                        {{ formatTokenName(store.networks[store.currentNetwork].token_name) }}
                     </div>
                 </div>
 
@@ -155,8 +153,8 @@
                     <div class="label">{{ $t('message.proposal_details_initial_label') }}</div>
 
                     <div class="val">
-                        {{ props.proposal.init_deposit / Math.pow(10, store.networks[props.proposal.network].exponent) }}
-                        {{ store.networks[props.proposal.network].token_name }}
+                        {{ formatTokenAmount(props.proposal.init_deposit, store.networks[store.currentNetwork].token_name) }}
+                        {{ formatTokenName(store.networks[store.currentNetwork].token_name) }}
                     </div>
                 </div>
             </div>
@@ -221,8 +219,8 @@
 
             <div class="exp" v-if="props.proposal.status == 'PROPOSAL_STATUS_VOTING_PERIOD'">
                 {{ $t('message.proposal_vote_info_minimum', {
-                    amount: Number($filters.toFixed(props.stakingPool.amount / Math.pow(10, props.stakingPool.exponent) * 0.4, 2)).toLocaleString('en-US'),
-                    denom: store.networks[props.proposal.network].token_name
+                    amount: Number($filters.toFixed(formatTokenAmount(props.stakingPool.amount, store.networks[store.currentNetwork].token_name) * 0.4, 2)).toLocaleString('en-US'),
+                    denom: formatTokenName(store.networks[store.currentNetwork].token_name)
                 })}}
             </div>
         </div>
@@ -236,8 +234,8 @@
                     </div>
 
                     <div class="tokens_count">
-                        {{ Number($filters.toFixed(props.proposal.tally_yes / Math.pow(10, store.networks[props.proposal.network].exponent), 2)).toLocaleString('en-US') }}
-                        {{ store.networks[props.proposal.network].token_name }}
+                        {{ Number($filters.toFixed(formatTokenAmount(props.proposal.tally_yes, store.networks[store.currentNetwork].token_name), 2)).toLocaleString('en-US') }}
+                        {{ formatTokenName(store.networks[store.currentNetwork].token_name) }}
                     </div>
 
                     <div class="votes_count">
@@ -252,8 +250,8 @@
                     </div>
 
                     <div class="tokens_count">
-                        {{ Number($filters.toFixed(props.proposal.tally_no / Math.pow(10, store.networks[props.proposal.network].exponent), 2)).toLocaleString('en-US') }}
-                        {{ store.networks[props.proposal.network].token_name }}
+                        {{ Number($filters.toFixed(formatTokenAmount(props.proposal.tally_no, store.networks[store.currentNetwork].token_name), 2)).toLocaleString('en-US') }}
+                        {{ formatTokenName(store.networks[store.currentNetwork].token_name) }}
                     </div>
 
                     <div class="votes_count">
@@ -268,8 +266,8 @@
                     </div>
 
                     <div class="tokens_count">
-                        {{ Number($filters.toFixed(props.proposal.tally_no_with_veto / Math.pow(10, store.networks[props.proposal.network].exponent), 2)).toLocaleString('en-US') }}
-                        {{ store.networks[props.proposal.network].token_name }}
+                        {{ Number($filters.toFixed(formatTokenAmount(props.proposal.tally_no_with_veto, store.networks[store.currentNetwork].token_name), 2)).toLocaleString('en-US') }}
+                        {{ formatTokenName(store.networks[store.currentNetwork].token_name) }}
                     </div>
 
                     <div class="votes_count">
@@ -284,8 +282,8 @@
                     </div>
 
                     <div class="tokens_count">
-                        {{ Number($filters.toFixed(props.proposal.tally_abstain / Math.pow(10, store.networks[props.proposal.network].exponent), 2)).toLocaleString('en-US') }}
-                        {{ store.networks[props.proposal.network].token_name }}
+                        {{ Number($filters.toFixed(formatTokenAmount(props.proposal.tally_abstain, store.networks[store.currentNetwork].token_name), 2)).toLocaleString('en-US') }}
+                        {{ formatTokenName(store.networks[store.currentNetwork].token_name) }}
                     </div>
 
                     <div class="votes_count">
@@ -303,11 +301,10 @@
 
 
 <script setup>
-    import { ref, reactive, inject, onMounted, computed } from 'vue'
+    import { ref, reactive, inject, computed } from 'vue'
     import { useGlobalStore } from '@/stores'
     import { useNotification } from '@kyvg/vue3-notification'
-    import { generateAddress, prepareTx, sendTx } from '@/utils'
-    import hcSticky from 'hc-sticky'
+    import { generateAddress, prepareTx, sendTx, formatTokenName, formatTokenAmount } from '@/utils'
 
     import { Chart as ChartJS, ArcElement } from 'chart.js'
     import { Doughnut } from 'vue-chartjs'
@@ -363,14 +360,6 @@
         }))
 
 
-    onMounted(async () => {
-        // Sticky element
-        let stickyElements = document.querySelectorAll('.sticky')
-
-        stickyElements.forEach(el => new hcSticky(el, { top: 118 }))
-    })
-
-
     // Get current account
     function getCurrentAccount() {
         let { nickname } = store.account.wallets.find(wallet => wallet.address == store.account.currentWallet)
@@ -565,21 +554,26 @@
 
 
 <style scoped>
+    .sticky
+    {
+        position: sticky;
+        top: 118px;
+    }
+
     .current_account
     {
         position: relative;
 
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: space-between;
 
         margin-bottom: 16px;
         padding-bottom: 16px;
 
         border-bottom: 1px solid rgba(255, 255, 255, .05);
-
-        justify-content: space-between;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
     }
 
 
@@ -685,11 +679,10 @@
         position: relative;
 
         display: flex;
-
-        justify-content: space-between;
-        align-items: center;
         align-content: center;
+        align-items: center;
         flex-wrap: wrap;
+        justify-content: space-between;
     }
 
     .current_vote .val::first-letter
@@ -713,15 +706,14 @@
         position: relative;
 
         display: flex;
+        align-content: stretch;
+        align-items: stretch;
+        flex-wrap: wrap;
+        justify-content: flex-start;
 
         margin-top: 16px;
         margin-bottom: -8px;
         margin-left: -8px;
-
-        justify-content: flex-start;
-        align-items: stretch;
-        align-content: stretch;
-        flex-wrap: wrap;
     }
 
 
@@ -812,30 +804,29 @@
         line-height: 100%;
 
         display: flex;
-
-        margin-bottom: 16px;
-
-        justify-content: space-between;
-        align-items: center;
         align-content: center;
+        align-items: center;
         flex-wrap: wrap;
+        justify-content: space-between;
+
+        margin-bottom: 16px;
     }
 
 
     .refresh_btn
     {
-        color: #950fff;
         font-size: 14px;
         line-height: 20px;
 
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: flex-start;
 
         margin-left: auto;
 
-        justify-content: flex-start;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
+        color: #950fff;
     }
 
     .refresh_btn .icon
@@ -870,17 +861,15 @@
 
     .deposit_btn.disabled
     {
-        color: rgba(255,255,255,.5);
-
         cursor: default;
         pointer-events: none;
 
+        color: rgba(255,255,255,.5);
         background: rgba(149, 15, 255, .5);
     }
 
     .deposit_btn .tooltip
     {
-        color: #fff;
         font-size: 12px;
         line-height: 100%;
 
@@ -895,6 +884,7 @@
         transform: translateX(-50%);
         white-space: nowrap;
 
+        color: #fff;
         border-radius: 8px;
         background: #282828;
         box-shadow: 0 6px 12px rgba(0, 0, 0, .2);
@@ -945,11 +935,11 @@
 
     .details .row
     {
+        align-content: stretch;
+        align-items: stretch;
+
         margin-bottom: -8px;
         margin-left: -8px;
-
-        align-items: stretch;
-        align-content: stretch;
     }
 
     .details .row > *
@@ -972,11 +962,12 @@
 
     .details .label
     {
-        color: #555;
         font-size: 12px;
         line-height: 100%;
 
         margin-bottom: 8px;
+
+        color: #555;
     }
 
 
@@ -1000,13 +991,12 @@
     .vote_info .head
     {
         display: flex;
-
-        margin-bottom: 16px;
-
-        justify-content: space-between;
-        align-items: center;
         align-content: center;
+        align-items: center;
         flex-wrap: wrap;
+        justify-content: space-between;
+
+        margin-bottom: 16px;
     }
 
 
@@ -1036,16 +1026,15 @@
         position: absolute;
 
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: center;
 
         width: 100%;
         height: 100%;
 
         text-align: center;
-
-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
     }
 
 
@@ -1054,25 +1043,25 @@
         position: absolute;
 
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: center;
 
         width: 100%;
         height: 100%;
 
         text-align: center;
-
-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
     }
 
     .chart .final_status .label
     {
-        color: #555;
         font-size: 14px;
         line-height: 17px;
 
         width: 100%;
+
+        color: #555;
     }
 
     .chart .final_status .val
@@ -1108,7 +1097,6 @@
 
     .vote_info .turnout
     {
-        color: #eb5757;
         font-size: 12px;
         line-height: 15px;
 
@@ -1116,6 +1104,7 @@
         margin-right: auto;
         padding: 7px;
 
+        color: #eb5757;
         border: 1px solid;
         border-radius: 8px;
     }
@@ -1128,13 +1117,13 @@
 
     .vote_info .total
     {
-        color: #950fff;
         font-size: 12px;
         line-height: 15px;
 
         margin-top: 16px;
         padding: 7px;
 
+        color: #950fff;
         border: 1px solid;
         border-radius: 8px;
     }
@@ -1142,28 +1131,29 @@
 
     .vote_info .exp
     {
-        color: #555;
         font-size: 12px;
         line-height: 15px;
 
         margin-top: 8px;
+
+        color: #555;
     }
 
 
     .vote_info .refresh_btn
     {
-        color: #950fff;
         font-size: 14px;
         line-height: 20px;
 
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: flex-start;
 
         margin-left: auto;
 
-        justify-content: flex-start;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
+        color: #950fff;
     }
 
     .vote_info .refresh_btn .icon
@@ -1187,11 +1177,11 @@
 
     .vote_result .row
     {
+        align-content: stretch;
+        align-items: stretch;
+
         margin-bottom: -8px;
         margin-left: -8px;
-
-        align-items: stretch;
-        align-content: stretch;
     }
 
     .vote_result .row > *
@@ -1204,12 +1194,12 @@
 
     .vote_result .item
     {
-        color: #555;
         font-size: 14px;
         line-height: 100%;
 
         padding: 8px;
 
+        color: #555;
         border-radius: 10px;
         background: #191919;
     }
@@ -1295,5 +1285,4 @@
             font-size: 28px;
         }
     }
-
 </style>
\ No newline at end of file
diff --git a/src/views/Account.vue b/src/views/Account.vue
index 54f064d..f1c249f 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -80,6 +80,8 @@
 <style scoped>
     .grid
     {
+        align-content: stretch;
+        align-items: stretch;
         justify-content: space-between;
     }
 
diff --git a/src/views/Proposals.vue b/src/views/Proposals.vue
index c07cbec..160527d 100644
--- a/src/views/Proposals.vue
+++ b/src/views/Proposals.vue
@@ -2,11 +2,11 @@
     <section class="proposals_page">
         <div class="cont middle">
             <div class="back_btn">
-                <router-link to="/account/cosmoshub?demo=true" class="btn" v-if="store.demo">
+                <router-link :to="`/account/${store.currentNetwork}?demo=true`" class="btn" v-if="store.demo">
                     <svg class="icon"><use xlink:href="@/assets/sprite.svg#ic_arrow_hor"></use></svg>
                 </router-link>
 
-                <router-link to="/account/cosmoshub" class="btn" v-else>
+                <router-link :to="`/account/${store.currentNetwork}`" class="btn" v-else>
                     <svg class="icon"><use xlink:href="@/assets/sprite.svg#ic_arrow_hor"></use></svg>
                 </router-link>
             </div>
@@ -15,12 +15,12 @@
             <div class="grid row">
                 <section class="col">
                     <!-- Networks -->
-                    <Networks class="sticky" />
+                    <Networks />
                 </section>
 
 
                 <section class="col_main">
-                    <div class="head sticky">
+                    <div class="head">
                         <div class="title">
                             {{ $t('message.account_proposals_title') }}
                         </div>
@@ -56,7 +56,7 @@
 
                 <section class="col">
                     <!-- Filter -->
-                    <div class="filter sticky">
+                    <div class="filter">
                         <div class="title" @click.prevent="toggleActiveClass">
                             <span>{{ $t('message.filter_title') }}</span>
 
@@ -103,7 +103,6 @@
 <script setup>
     import { onBeforeMount, reactive, ref, inject, watch, computed } from 'vue'
     import { useGlobalStore } from '@/stores'
-    import hcSticky from 'hc-sticky'
     import { useUrlSearchParams } from '@vueuse/core'
 
     // Components
@@ -141,13 +140,6 @@
         } catch (error) {
             console.error(error)
         }
-
-        // Sticky element
-        if(window.innerWidth > 1279) {
-            let stickyElements = document.querySelectorAll('.sticky')
-
-            stickyElements.forEach(el => new hcSticky(el, { top: 118 }))
-        }
     })
 
 
@@ -334,9 +326,11 @@
 
     .back_btn .btn
     {
-        color: currentColor;
-
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: center;
 
         width: 36px;
         height: 36px;
@@ -344,13 +338,9 @@
         transition: background .2s linear;
         text-decoration: none;
 
+        color: currentColor;
         border-radius: 50%;
         background: #141414;
-
-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
     }
 
 
@@ -371,9 +361,9 @@
 
     .grid
     {
-        justify-content: space-between;
-        align-items: stretch;
         align-content: stretch;
+        align-items: stretch;
+        justify-content: space-between;
     }
 
 
@@ -393,20 +383,20 @@
 
     .head
     {
-        position: relative;
+        position: sticky;
         z-index: 9;
+        top: 118px;
 
         display: flex;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: space-between;
 
         margin-top: -28px;
         padding: 28px 0 20px;
 
         background: var(--bg);
-
-        justify-content: space-between;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
     }
 
 
@@ -420,7 +410,6 @@
 
     .head .create_link
     {
-        color: currentColor;
         font-size: 16px;
         font-weight: 500;
         line-height: 110%;
@@ -433,6 +422,7 @@
         transition: background .2s linear;
         text-decoration: none;
 
+        color: currentColor;
         border-radius: 16px;
         background: #950fff;
     }
@@ -458,14 +448,13 @@
     .proposals
     {
         display: flex;
+        align-content: stretch;
+        align-items: stretch;
+        flex-wrap: wrap;
+        justify-content: flex-start;
 
         margin-bottom: -20px;
         margin-left: -20px;
-
-        justify-content: flex-start;
-        align-items: stretch;
-        align-content: stretch;
-        flex-wrap: wrap;
     }
 
     .proposals > *
@@ -516,6 +505,9 @@
 
     .filter
     {
+        position: sticky;
+        top: 118px;
+
         padding: 16px 14px 24px;
 
         border-radius: 20px;
@@ -530,13 +522,12 @@
         line-height: 36px;
 
         display: flex;
-
-        pointer-events: none;
-
-        justify-content: flex-start;
-        align-items: center;
         align-content: center;
+        align-items: center;
         flex-wrap: wrap;
+        justify-content: flex-start;
+
+        pointer-events: none;
     }
 
     .filter .title > *
@@ -635,13 +626,15 @@
 
     .btn_up
     {
-        color: currentColor;
-
         position: fixed;
         right: auto;
         bottom: 200px;
 
         display: none;
+        align-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: center;
 
         width: 48px;
         height: 48px;
@@ -650,13 +643,9 @@
         text-decoration: none;
 
         opacity: 1;
+        color: currentColor;
         border-radius: 16px;
         background: #950fff;
-
-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
     }
 
 
@@ -874,5 +863,4 @@
             padding: 40px 0;
         }
     }
-
 </style>
\ No newline at end of file