From 46f8388aa1a9064db8e3f953d0786ff31d30263f Mon Sep 17 00:00:00 2001
From: shamilkhan <shamilkhan1999@gmail.com>
Date: Wed, 27 Sep 2023 12:54:21 +0400
Subject: [PATCH 1/6] Add FIAT conversion component.

---
 frontend/assets/scss/themes/polkastats.scss |  52 +++++++++
 frontend/components/Chain.vue               |   7 +-
 frontend/components/FIATConversion.vue      | 121 ++++++++++++++++++++
 3 files changed, 179 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/FIATConversion.vue

diff --git a/frontend/assets/scss/themes/polkastats.scss b/frontend/assets/scss/themes/polkastats.scss
index 3d5677b5..86c9adce 100644
--- a/frontend/assets/scss/themes/polkastats.scss
+++ b/frontend/assets/scss/themes/polkastats.scss
@@ -635,3 +635,55 @@ section .section-title {
     background-position: 10% 20%;
   }
 }
+
+// FIAT conversion component
+
+.fiat-conversion {
+  font-size: 0.8rem;
+  margin-left: 0.4rem;
+  padding: 0.2rem 0.4rem;
+  background-color: rgb(192, 229, 243);
+  border-radius: 0.2rem;
+  cursor: pointer;
+  animation-duration: 0.6s;
+  color: rgb(11, 129, 168);
+}
+.fiat-conversion:hover {
+  background-color: rgb(11, 129, 168);
+  color: white;
+  animation-name: onHoverAnimation;
+}
+
+@keyframes onHoverAnimation {
+  0% {
+    background-color: rgb(192, 229, 243);
+  }
+  100% {
+    background-color: rgb(11, 129, 168);
+  }
+}
+
+.fiat-conversion-short {
+  cursor: pointer;
+}
+.fiat-conversion-short .fa-circle {
+  color: rgb(192, 229, 243) !important;
+}
+.fiat-conversion-short .fa-dollar-sign {
+  color: rgb(11, 129, 168);
+}
+.fiat-conversion-short:hover .fa-circle {
+  color: rgb(11, 129, 168) !important;
+}
+.fiat-conversion-short:hover .fa-dollar-sign {
+  color: white;
+}
+
+.dropdown-item {
+  color: rgba(0, 0, 0, 0.5);
+  font-size: 0.9rem;
+}
+
+.dropdown-item.active, .dropdown-item:active {
+  color: rgba(0, 0, 0, 0.9);
+}
diff --git a/frontend/components/Chain.vue b/frontend/components/Chain.vue
index c3b2a63a..0df0d1da 100644
--- a/frontend/components/Chain.vue
+++ b/frontend/components/Chain.vue
@@ -112,6 +112,7 @@
             </h4>
             <h6 class="d-inline-block">
               {{ formatAmount(totalIssuance) }}
+              <FIATConversion :units="totalIssuance.toString()" :short="true" />
             </h6>
           </div>
         </div>
@@ -126,7 +127,9 @@
               {{ $t('components.network.total_staked') }}
             </h4>
             <h6 class="d-inline-block">
-              {{ formatAmount(totalStaked) }}
+              {{ formatAmount(totalStaked, 0, true) }}
+              <FIATConversion :units="totalStaked.toString()" :short="true" />
+              ({{ formatNumber(totalStakedPercentage) }}%)
             </h6>
           </div>
         </div>
@@ -176,8 +179,10 @@ import { gql } from 'graphql-tag'
 import BN from 'bn.js'
 import commonMixin from '../mixins/commonMixin.js'
 import { network } from '../frontend.config.js'
+import FIATConversion from '@/components/FIATConversion'
 
 export default {
+  components: [FIATConversion],
   mixins: [commonMixin],
   data() {
     return {
diff --git a/frontend/components/FIATConversion.vue b/frontend/components/FIATConversion.vue
new file mode 100644
index 00000000..891cd46f
--- /dev/null
+++ b/frontend/components/FIATConversion.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="d-inline-block">
+    <div v-if="!timestamp || sameDay">
+      <span
+        v-if="short"
+        v-b-tooltip.hover
+        :title="`$${formatNumber(FIATValue.toFixed(2))}`"
+      >
+        <font-awesome-layers class="fa-lg align-middle fiat-conversion-short">
+          <font-awesome-icon icon="circle" />
+          <font-awesome-icon icon="dollar-sign" transform="shrink-6" />
+        </font-awesome-layers>
+      </span>
+      <div
+        v-else
+        v-b-tooltip.hover
+        class="fiat-conversion"
+        :title="$t('components.fiat_conversion.current_value')"
+      >
+        (${{ formatNumber(FIATValue.toFixed(2)) }})
+      </div>
+    </div>
+    <div v-else @click="historical = !historical">
+      <div
+        v-if="historical"
+        v-b-tooltip.hover
+        class="fiat-conversion"
+        :title="$t('components.fiat_conversion.historic_value')"
+      >
+        (${{ formatNumber(historicalFIATValue.toFixed(2)) }})
+      </div>
+      <div
+        v-else
+        v-b-tooltip.hover
+        class="fiat-conversion"
+        :title="$t('components.fiat_conversion.current_value')"
+      >
+        (${{ formatNumber(FIATValue.toFixed(2)) }})
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import { BigNumber } from 'bignumber.js'
+import commonMixin from '@/mixins/commonMixin.js'
+import { network } from '@/frontend.config.js'
+
+export default {
+  mixins: [commonMixin],
+  props: {
+    units: {
+      type: String,
+      default: '0',
+      required: true,
+    },
+    timestamp: {
+      type: Number,
+      default: 0,
+    },
+    short: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      historical: false,
+      network,
+      historicalFIATValue: 0,
+    }
+  },
+  computed: {
+    date() {
+      return this.getDateFromTimestampDDMMYYYY(this.timestamp)
+    },
+    USDConversion() {
+      return parseFloat(this.$store.state.fiat.usd)
+    },
+    FIATValue() {
+      return (
+        this.USDConversion *
+        new BigNumber(this.units).div(
+          new BigNumber(10).pow(network.tokenDecimals)
+        )
+      )
+    },
+    sameDay() {
+      return this.date === this.getDateFromTimestampDDMMYYYY(Date.now())
+    },
+  },
+  async mounted() {
+    this.historicalFIATValue = this.timestamp
+      ? await this.getHistoricalFIATValue()
+      : 0
+  },
+  methods: {
+    async getHistoricalFIATValue() {
+      if (network.coinGeckoDenom) {
+        const response = await axios
+          .get(
+            `https://api.coingecko.com/api/v3/coins/${network.coinGeckoDenom}/history?date=${this.date}`
+          )
+          .catch((error) => {
+            // eslint-disable-next-line no-console
+            console.log('Error fetching historical fiat value: ', error)
+          })
+          .finally(() => {
+            return 0
+          })
+        return (
+          response.data.market_data.current_price.usd *
+          new BigNumber(this.units).div(
+            new BigNumber(10).pow(network.tokenDecimals)
+          )
+        )
+      }
+    },
+  },
+}
+</script>

From 957e8848474a019948dc7ad3d73023ab57e90e00 Mon Sep 17 00:00:00 2001
From: shamilkhan <shamilkhan1999@gmail.com>
Date: Wed, 27 Sep 2023 13:08:22 +0400
Subject: [PATCH 2/6] Update Search UI

---
 frontend/components/Search.vue | 30 ++++++++++++++++++------------
 frontend/locales/en.json       |  3 +++
 frontend/locales/es.json       |  3 +++
 frontend/pages/index.vue       |  1 +
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/frontend/components/Search.vue b/frontend/components/Search.vue
index c4a9c34b..6f1d73cb 100644
--- a/frontend/components/Search.vue
+++ b/frontend/components/Search.vue
@@ -1,20 +1,26 @@
 <template>
-  <!-- Filter -->
+  <!-- Search -->
   <b-row class="mb-4">
     <b-col cols="12">
-      <b-form-input
-        id="searchInput"
-        v-model="searchInput"
-        type="search"
-        placeholder="Search by block number, block hash, extrinsic hash or account address"
-        @keydown.native="doSearch"
-      />
+      <b-input-group size="xl" class="mb-2">
+        <b-input-group-prepend is-text>
+          <font-awesome-icon icon="search" />
+        </b-input-group-prepend>
+        <b-form-input
+          id="searchInput"
+          v-model="searchInput"
+          type="search"
+          :placeholder="$t('components.search.caption')"
+          @keydown.native="doSearch"
+        />
+      </b-input-group>
     </b-col>
   </b-row>
 </template>
 
 <script>
 import commonMixin from '@/mixins/commonMixin.js'
+
 export default {
   mixins: [commonMixin],
   data() {
@@ -27,19 +33,19 @@ export default {
       if (event.keyCode === 13) {
         if (await this.isExtrinsicHash(this.searchInput)) {
           this.$router.push({
-            path: `/extrinsic/${this.searchInput}`,
+            path: this.localePath(`/extrinsic/${this.searchInput}`),
           })
         } else if (await this.isBlockHash(this.searchInput)) {
           this.$router.push({
-            path: `/block/${this.searchInput}`,
+            path: this.localePath(`/block/${this.searchInput}`),
           })
         } else if (this.isAddress(this.searchInput)) {
           this.$router.push({
-            path: `/account/${this.searchInput}`,
+            path: this.localePath(`/account/${this.searchInput}`),
           })
         } else if (this.isBlockNumber(this.searchInput)) {
           this.$router.push({
-            path: `/block?blockNumber=${this.searchInput}`,
+            path: this.localePath(`/block?blockNumber=${this.searchInput}`),
           })
         }
       }
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 81c8325f..393b3fb1 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -56,6 +56,9 @@
     },
     "loading": {
       "loading_data": "Loading data, please be patient..."
+    },
+    "search": {
+      "caption": "Search by block number, block hash, extrinsic hash or account address"
     }
   },
   "layout": {
diff --git a/frontend/locales/es.json b/frontend/locales/es.json
index 1a3d6fd0..142d55d4 100644
--- a/frontend/locales/es.json
+++ b/frontend/locales/es.json
@@ -56,6 +56,9 @@
     },
     "loading": {
       "loading_data": "Cargando datos, por favor sea paciente..."
+    },
+    "search": {
+      "caption": "Buscar por bloque, hash de bloque, hash de extrinsic o dirección"
     }
   },
   "layout": {
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index ddb104f6..59c3e639 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -2,6 +2,7 @@
   <div>
     <section>
       <b-container class="main py-5 dashboard">
+        <Search />
         <Chain />
         <Search />
         <div class="row">

From 7cdd875035a2d0afc9c34e7c57eb5dc2f5fde174 Mon Sep 17 00:00:00 2001
From: shamilkhan <shamilkhan1999@gmail.com>
Date: Wed, 27 Sep 2023 13:27:26 +0400
Subject: [PATCH 3/6] Update Search for Accounts and Ranking Pages.

---
 frontend/components/Ranking.vue | 20 ++++++++++++--------
 frontend/pages/accounts.vue     | 17 +++++++++++------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/frontend/components/Ranking.vue b/frontend/components/Ranking.vue
index be5d7e30..9d2dec69 100644
--- a/frontend/components/Ranking.vue
+++ b/frontend/components/Ranking.vue
@@ -62,14 +62,18 @@
       <!-- Filter -->
       <b-row>
         <b-col cols="12">
-          <b-form-input
-            id="filterInput"
-            v-model="filter"
-            type="search"
-            placeholder="Search validator by address or name"
-            debounce="500"
-            class="mb-3"
-          />
+          <b-input-group class="mt-3 mb-4">
+            <b-input-group-prepend is-text>
+              <font-awesome-icon icon="search" />
+            </b-input-group-prepend>
+            <b-form-input
+              id="filterInput"
+              v-model="filter"
+              type="search"
+              placeholder="Search validator by address or name"
+              debounce="500"
+            />
+          </b-input-group>
         </b-col>
       </b-row>
       <!-- Search results -->
diff --git a/frontend/pages/accounts.vue b/frontend/pages/accounts.vue
index e3cfbe6f..d43d287c 100644
--- a/frontend/pages/accounts.vue
+++ b/frontend/pages/accounts.vue
@@ -19,12 +19,17 @@
           <!-- Filter -->
           <b-row>
             <b-col lg="12" class="mb-3">
-              <b-form-input
-                id="filterInput"
-                v-model="filter"
-                type="search"
-                :placeholder="$t('pages.accounts.search_placeholder')"
-              />
+              <b-input-group size="xl" class="mb-2">
+                <b-input-group-prepend is-text>
+                  <font-awesome-icon icon="search" />
+                </b-input-group-prepend>
+                <b-form-input
+                  id="filterInput"
+                  v-model="filter"
+                  type="search"
+                  :placeholder="$t('pages.accounts.search_placeholder')"
+                />
+              </b-input-group>
             </b-col>
           </b-row>
           <!-- Mobile sorting -->

From fe18a7abf5f439599c75c4f50f96f06af015dc04 Mon Sep 17 00:00:00 2001
From: shamilkhan <shamilkhan1999@gmail.com>
Date: Wed, 27 Sep 2023 13:57:09 +0400
Subject: [PATCH 4/6] Update CHANGELOG.md

---
 CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44df6664..ee764336 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,10 @@
 # Cere Stats
 
 ## vNext
-...
+- [FE] Token Metrics Enhancements:
+    - Express both the "Total Supply" and "Total Staked" values in USD.
+    - Present the proportion of the "Total Staked" as a percentage of the "Total Supply."
+- [FE] Search Bar Redesign
 
 ## v0.32.0
 - [BE] Add Resilient Network Initialization to Cere Stats API for Robust Handling of Network Failures

From f4780bc9f47f26731685db4741f6fb72f386de93 Mon Sep 17 00:00:00 2001
From: shamilkhan <shamilkhan1999@gmail.com>
Date: Wed, 27 Sep 2023 14:58:42 +0400
Subject: [PATCH 5/6] Release 0.33.0

---
 CHANGELOG.md          | 3 +++
 api/package.json      | 2 +-
 backend/package.json  | 2 +-
 frontend/package.json | 2 +-
 package.json          | 2 +-
 5 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee764336..63925509 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # Cere Stats
 
 ## vNext
+...
+
+## v0.33.0
 - [FE] Token Metrics Enhancements:
     - Express both the "Total Supply" and "Total Staked" values in USD.
     - Present the proportion of the "Total Staked" as a percentage of the "Total Supply."
diff --git a/api/package.json b/api/package.json
index 732f3fba..0c9e90cb 100644
--- a/api/package.json
+++ b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "PolkaStats API",
   "author": "Mario Pino Uceda",
   "license": "Apache-2.0",
diff --git a/backend/package.json b/backend/package.json
index a0473f23..954251bd 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "backend",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "PolkaStats NG Backend",
   "author": "Mario Pino Uceda",
   "license": "Apache-2.0",
diff --git a/frontend/package.json b/frontend/package.json
index 67be1445..c2b70f46 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "PolkaStats NG frontend",
   "author": "Mario Pino Uceda",
   "license": "Apache-2.0",
diff --git a/package.json b/package.json
index 1e9b6147..d4152e34 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "cerestats",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "Cere Stats mono repo",
   "repository": {
     "type": "git",

From 812519aef32def12e5acbdf567407899cf38982f Mon Sep 17 00:00:00 2001
From: shamilkhan <shamilkhan1999@gmail.com>
Date: Wed, 27 Sep 2023 17:36:01 +0400
Subject: [PATCH 6/6] Remove extra Search

---
 frontend/pages/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 59c3e639..0eded0af 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -4,7 +4,6 @@
       <b-container class="main py-5 dashboard">
         <Search />
         <Chain />
-        <Search />
         <div class="row">
           <div class="col-md-6 mb-4">
             <h3>