From 35881a84095458eef50a638513c103ff8882fad9 Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Fri, 27 Sep 2024 17:42:09 +0200
Subject: [PATCH] ADD: gas widget

---
 .../components/widgets/GasWidget.vue            | 17 +++++++++++++++++
 .../UI/control-page/sections/SidebarRight.vue   |  5 ++++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 launcher/src/components/UI/control-page/components/widgets/GasWidget.vue

diff --git a/launcher/src/components/UI/control-page/components/widgets/GasWidget.vue b/launcher/src/components/UI/control-page/components/widgets/GasWidget.vue
new file mode 100644
index 000000000..18a99bf5c
--- /dev/null
+++ b/launcher/src/components/UI/control-page/components/widgets/GasWidget.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="gas-parent flex justify-center items-center flex-col w-full h-full">
+    <div class="w-full h-1/3 flex justify-center items-center text-gray-200 text-xs font-bold uppercase">change</div>
+    <div class="w-full h-1/3 flex justify-center items-center text-green-500 text-lg font-bold uppercase">
+      {{ gasFee }}
+    </div>
+    <div class="w-full h-1/3 flex justify-center items-center text-gray-200 text-xs font-bold uppercase">gwei</div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const gasFee = ref("+1,022"); //dummy gas fee
+</script>
+
+<style scoped></style>
diff --git a/launcher/src/components/UI/control-page/sections/SidebarRight.vue b/launcher/src/components/UI/control-page/sections/SidebarRight.vue
index 40e27ed15..1b72c328c 100644
--- a/launcher/src/components/UI/control-page/sections/SidebarRight.vue
+++ b/launcher/src/components/UI/control-page/sections/SidebarRight.vue
@@ -2,7 +2,9 @@
   <div
     class="w-full h-full col-start-22 col-end-25 row-start-2 row-span-full grid grid-cols-3 grid-rows-15 items-center gap-1 pt-2 pb-1 pr-1"
   >
-    <MiniCard class="col-start-1 col-span-3 row-start-1 row-span-3"><ClientPairWidget /></MiniCard>
+    <MiniCard class="col-start-1 col-span-3 row-start-1 row-span-3"
+      ><ClientPairWidget v-if="controlStore.pickeedService === 'exeCons'" /><GasWidget v-else
+    /></MiniCard>
     <MiniCard v-if="controlStore.pickeedService === 'exeCons'" class="col-start-1 col-span-3 row-start-4 row-span-3"
       ><PairStatusWidget
     /></MiniCard>
@@ -21,6 +23,7 @@ import ClientPairWidget from "../components/widgets/ClientPairWidget.vue";
 import PairStatusWidget from "../components/widgets/PairStatusWidget.vue";
 import RPCRecievedOverTime from "../components/widgets/RPCRecievedOverTime.vue";
 import ServicePort from "../components/widgets/ServicePort.vue";
+import GasWidget from "../components/widgets/GasWidget.vue";
 
 import { useControlStore } from "@/store/theControl";