From e3b52bda3696c684ca944b43451868be681ef769 Mon Sep 17 00:00:00 2001
From: Thunder <mahmmoud.hassanein@gmail.com>
Date: Mon, 29 May 2023 11:55:25 +0300
Subject: [PATCH 1/2] Added TFTPrice component.

---
 packages/dashboard/src/Dashboard.vue          |  7 +-
 .../src/portal/components/TftSwapPrice.vue    | 64 +++++++++++++++++++
 2 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 packages/dashboard/src/portal/components/TftSwapPrice.vue

diff --git a/packages/dashboard/src/Dashboard.vue b/packages/dashboard/src/Dashboard.vue
index 0cc1b6ffcf..b7369610c2 100644
--- a/packages/dashboard/src/Dashboard.vue
+++ b/packages/dashboard/src/Dashboard.vue
@@ -8,7 +8,9 @@
           >Threefold Chain</v-toolbar-title
         >
 
-        <v-spacer></v-spacer>
+        <v-spacer>
+          <TftSwapPrice v-if="!loadingAPI" />
+        </v-spacer>
         <div class="d-flex">
           <FundsCard v-if="$store.state.credentials.initialized && $store.state.credentials.balance" />
           <div class="d-flex" style="align-items: center">
@@ -194,6 +196,7 @@ import { Component, Vue } from "vue-property-decorator";
 import config from "@/portal/config";
 
 import FundsCard from "./portal/components/FundsCard.vue";
+import TftSwapPrice from "./portal/components/TftSwapPrice.vue";
 import WelcomeWindow from "./portal/components/WelcomeWindow.vue";
 import { connect } from "./portal/lib/connect";
 import { accountInterface } from "./portal/store/state";
@@ -222,7 +225,7 @@ interface SidenavItem {
 
 @Component({
   name: "Dashboard",
-  components: { WelcomeWindow, FundsCard },
+  components: { WelcomeWindow, FundsCard, TftSwapPrice },
 })
 export default class Dashboard extends Vue {
   collapseOnScroll = true;
diff --git a/packages/dashboard/src/portal/components/TftSwapPrice.vue b/packages/dashboard/src/portal/components/TftSwapPrice.vue
new file mode 100644
index 0000000000..4aa2273d0b
--- /dev/null
+++ b/packages/dashboard/src/portal/components/TftSwapPrice.vue
@@ -0,0 +1,64 @@
+<template>
+  <v-container>
+    <div class="d-flex ml-5">
+      <div class="d-flex" style="align-items: center">
+        <p>{{ prices[0].amount }} {{ prices[0].currency }}</p>
+        <v-tooltip>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn @click="priceSwap" icon v-bind="attrs" v-on="on" class="d-flex align-center">
+              <v-icon>mdi-swap-horizontal</v-icon>
+            </v-btn>
+          </template>
+          <span>ThreeFold Price Swapping</span>
+        </v-tooltip>
+        <p>{{ prices[1].amount }} {{ prices[1].currency }}</p>
+      </div>
+    </div>
+  </v-container>
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+type SwapPrice = {
+  currency: string;
+  amount: number;
+};
+
+@Component({
+  name: "TftSwapPrice",
+})
+export default class FundsCard extends Vue {
+  $api: any;
+  swaped = false;
+  prices: SwapPrice[] = [
+    { currency: "TFT", amount: 1 },
+    { currency: "USD", amount: 0 },
+  ];
+
+  async mounted() {
+    this.prices[1].amount = await this.getTFTPrice();
+  }
+
+  async priceSwap() {
+    // Changing the values from TFT to USD and vice versa on click.
+    this.swaped = !this.swaped;
+    if (this.swaped) {
+      this.prices = [
+        { currency: "USD", amount: 1 },
+        { currency: "TFT", amount: Math.floor((1 / (await this.getTFTPrice())) * 1000) / 1000 },
+      ];
+    } else {
+      this.prices = [
+        { currency: "TFT", amount: 1 },
+        { currency: "USD", amount: await this.getTFTPrice() },
+      ];
+    }
+  }
+
+  async getTFTPrice() {
+    // Getting the TFT price from the substrate.
+    const res = await this.$api.query.tftPriceModule.tftPrice();
+    return res.toPrimitive() / 1000;
+  }
+}
+</script>

From 4d61aa8c02c07dcc0e562affd90f24c889ef160a Mon Sep 17 00:00:00 2001
From: Thunder <mahmmoud.hassanein@gmail.com>
Date: Mon, 29 May 2023 12:36:51 +0300
Subject: [PATCH 2/2] Change the component class name to be TftSwapPrice

---
 packages/dashboard/src/portal/components/TftSwapPrice.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/portal/components/TftSwapPrice.vue b/packages/dashboard/src/portal/components/TftSwapPrice.vue
index 4aa2273d0b..506980109f 100644
--- a/packages/dashboard/src/portal/components/TftSwapPrice.vue
+++ b/packages/dashboard/src/portal/components/TftSwapPrice.vue
@@ -27,7 +27,7 @@ type SwapPrice = {
 @Component({
   name: "TftSwapPrice",
 })
-export default class FundsCard extends Vue {
+export default class TftSwapPrice extends Vue {
   $api: any;
   swaped = false;
   prices: SwapPrice[] = [