From e96a68656724425ab479a2db181cd007809d952a Mon Sep 17 00:00:00 2001 From: kahnix Date: Mon, 9 Dec 2024 19:57:38 +0100 Subject: [PATCH] fix(styling): changed colors, default values, made search bar interactions more consistent --- src/components/charts/apexChartConfig.ts | 7 +-- src/modules/[chain]/ibc/connection.vue | 2 +- src/modules/[chain]/index.vue | 6 +-- src/modules/[chain]/tx/index.vue | 13 ++++- src/modules/[chain]/uptime/customize.vue | 5 -- src/modules/wallet/apr.vue | 60 ++++++++++++++---------- src/pages/index.vue | 26 +++++----- src/plugins/i18n/locales/en.json | 8 ++-- 8 files changed, 72 insertions(+), 55 deletions(-) diff --git a/src/components/charts/apexChartConfig.ts b/src/components/charts/apexChartConfig.ts index e4420e22be..2be351e07a 100644 --- a/src/components/charts/apexChartConfig.ts +++ b/src/components/charts/apexChartConfig.ts @@ -12,7 +12,7 @@ const themeColors = (theme: string) => { surface: '#FFFFFF', 'surface-variant': '#424242', 'on-surface-variant': '#EEEEEE', - primary: chainStore.current?.themeColor || '#9cd3b8', + primary: '#9cd3b8', 'primary-darken-1': '#9cd3b8', secondary: '#6D788D', 'secondary-darken-1': '#018786', @@ -222,10 +222,11 @@ export const getMarketPriceChartConfig = ( }, }, - colors: [themeColors(theme).colors.primary], + colors: [ '#fa7327'], fill: { - opacity: 0.5, + opacity: 0.8, type: 'gradient', + gradientToColors: ['#ff5722', '#fa7327'], }, grid: { show: true, diff --git a/src/modules/[chain]/ibc/connection.vue b/src/modules/[chain]/ibc/connection.vue index 136fe03631..cfbf0b1b8b 100644 --- a/src/modules/[chain]/ibc/connection.vue +++ b/src/modules/[chain]/ibc/connection.vue @@ -54,7 +54,7 @@ function pageload(p: number) { ⇌ {{ s.to }}
-
+
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue index 74f270e13b..84e1190158 100644 --- a/src/modules/[chain]/index.vue +++ b/src/modules/[chain]/index.vue @@ -110,7 +110,7 @@ const amount = computed({
{{ coinInfo.name }} ({{ coinInfo.symbol - }}) + }})
@@ -138,9 +138,9 @@ const amount = computed({
-
+
-
    +
    • diff --git a/src/modules/[chain]/tx/index.vue b/src/modules/[chain]/tx/index.vue index 548f636bd2..f5c1ac2079 100644 --- a/src/modules/[chain]/tx/index.vue +++ b/src/modules/[chain]/tx/index.vue @@ -3,6 +3,8 @@ import { computed, ref } from '@vue/reactivity'; import { useBaseStore, useBlockchain, useFormatter } from '@/stores'; import type { PaginatedTxs } from '@/types'; import { useRouter } from 'vue-router'; +import { Icon } from '@iconify/vue'; + import { onMounted } from 'vue'; const props = defineProps(['chain']); const vueRouters = useRouter(); @@ -77,8 +79,15 @@ function search() {
      - +
      + +
      + +
      +
      diff --git a/src/modules/[chain]/uptime/customize.vue b/src/modules/[chain]/uptime/customize.vue index 16c2d4e16e..088caa9d93 100644 --- a/src/modules/[chain]/uptime/customize.vue +++ b/src/modules/[chain]/uptime/customize.vue @@ -197,11 +197,6 @@ function color(v: string) {

      {{ $t('uptime.add_validators') }}

      -
      diff --git a/src/modules/wallet/apr.vue b/src/modules/wallet/apr.vue index 6166e01a9e..27d9c1358a 100644 --- a/src/modules/wallet/apr.vue +++ b/src/modules/wallet/apr.vue @@ -7,15 +7,16 @@ import { useStakingStore, useFormatter } from '@/stores'; +import { Icon } from '@iconify/vue'; const selectedTab = ref(localStorage.getItem('selectedTab') || 'Delegators'); -const amountTokens = ref(50); -const tokenPrice = ref(1); +const amountTokens = ref(1000000); +const tokenPrice = ref(0.1); const staking = useStakingStore(); const format = useFormatter(); const validatorSettings = reactive({ - validatorStake: 10, + validatorStake: 1000000, validatorCommission: 5, }); @@ -41,7 +42,7 @@ const calculateValidatorROI = computed(() => { const stake = Number(validatorSettings.validatorStake || 0); const commissionRate = Number(validatorSettings.validatorCommission || 0) / 100; const aprValue = parseFloat(apr.value as string) / 100; - if(!aprValue) return 0; + if (!aprValue) return 0; return Number((stake * aprValue * commissionRate).toFixed(2)); }); @@ -49,8 +50,8 @@ const calculateValidatorROI = computed(() => { const calculateDelegatorAPR = computed(() => { const tokens = Number(amountTokens.value || 0); const price = Number(tokenPrice.value || 0); - const aprValue = parseFloat(apr.value as string ) / 100; - if(!aprValue) return 0; + const aprValue = parseFloat(apr.value as string) / 100; + if (!aprValue) return 0; return Number((tokens * price * aprValue).toFixed(2)); }); @@ -66,34 +67,39 @@ watch(selectedTab, (newTab) => {
      - -
      - APR: {{apr}} + APR: {{ apr }}
      -
      +
      - VCTR + VCTR
      - +
      -

      Estimated ROI

      - (assuming 5% validator comission) -

      Daily: ${{ (calculateDelegatorAPR / 365).toFixed(2) }}

      -

      Monthly: ${{ (calculateDelegatorAPR / 12).toFixed(2) }}

      +
      +

      Estimated Staking Revenue

      + + + +
      +

      Daily: ${{ (calculateDelegatorAPR / 365).toFixed(2) + }}

      +

      Monthly: ${{ (calculateDelegatorAPR / + 12).toFixed(2) }}

      Yearly: ${{ calculateDelegatorAPR }}

      @@ -101,19 +107,23 @@ watch(selectedTab, (newTab) => {
      -
      +
      - VCTR + VCTR
      - +
      -

      Estimated ROI

      -

      Daily: ${{ (Number(calculateValidatorROI) / 365).toFixed(2) }}

      -

      Monthly: ${{ (Number(calculateValidatorROI) / 12).toFixed(2) }}

      -

      Yearly: ${{ calculateValidatorROI.toFixed(2)}}

      +

      Estimated Staking Revenue

      +

      Daily: ${{ (Number(calculateValidatorROI) / + 365).toFixed(2) }}

      +

      Monthly: ${{ (Number(calculateValidatorROI) / + 12).toFixed(2) }}

      +

      Yearly: ${{ + calculateValidatorROI.toFixed(2) }}

      diff --git a/src/pages/index.vue b/src/pages/index.vue index fffd620db7..62d6c2ceb6 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -59,25 +59,27 @@ function handleKeyPress(event: KeyboardEvent) {

      {{ $t('pages.title') }}

      -
      - +
      +
      + +
      + +
      +
      - +
      + {{ errorMessage }} +
      -

      {{ $t('pages.slogan') }}

      -
      -
      - {{ errorMessage }} -
      -
      +
      diff --git a/src/plugins/i18n/locales/en.json b/src/plugins/i18n/locales/en.json index b2c7b580b9..15896f57f6 100644 --- a/src/plugins/i18n/locales/en.json +++ b/src/plugins/i18n/locales/en.json @@ -225,8 +225,8 @@ "signer_addr": "Signer Address", "consensus_pub_key": "Consensus Public Key", "liquid_staking": "Liquid Staking", - "liquid_staking_shares":"Liquid Shares", - "validator_bond_share":"Validator Bonded" + "liquid_staking_shares": "Liquid Shares", + "validator_bond_share": "Validator Bonded" }, "statesync": { "title": "What's State Sync?", @@ -268,7 +268,7 @@ "signed_blocks": "Signed Blocks", "missing_blocks": "Missing Blocks", "add_validators": "Add Validators", - "add": "Add", + "add": "Confirm", "legend": "Legend", "committed": "Committed", "precommitted": "Precommitted", @@ -298,4 +298,4 @@ "app_versions": "Application Versions", "node_info": "Node Information" } -} +} \ No newline at end of file