Fix/update tools ui

products/neo-savant/src/components/Tools/AddressConverter.vue

@@ -1,8 +1,14 @@
 <template>
-  <div class="panel">
-    <div class="form-group mb-4">
-      <label class="d-flex align-items-center">
-        Bech32 Address
+    <el-dialog
+    :model-value="show"
+    title="Address Convertor"
+    width="500"
+  >
+    <el-row :gutter="20">
+      <el-col :span="22">
+        <el-input v-model="bech32" clearable placeholder="Bech32 Address"/>
+      </el-col>
+      <el-col :span="2">
         <el-tooltip placement="top">
           <a class="tooltip-target b3">
             <img src="@/assets/question.svg" />
@@ -18,14 +24,14 @@
             >[ZIP-1]</a>.
           </template>
         </el-tooltip>
-      </label>
-      <input type="text" class="form-control mb-2" :value="bech32" @change="handleBech32Change" />
-      <div class="text-danger text-small" v-if="bech32Error">{{ bech32Error }}</div>
-    </div>
+      </el-col>
+    </el-row> 
 
-    <div class="form-group">
-      <label class="d-flex align-items-center">
-        Base16 Address
+    <el-row :gutter="20">
+      <el-col :span="22">
+        <el-input v-model="base16" clearable placeholder="Base16 Address"/>
+      </el-col>
+      <el-col :span="2">
         <el-tooltip placement="top">
           <a class="tooltip-target">
             <img src="@/assets/question.svg" />
@@ -37,50 +43,39 @@
           in its global state and messages. This is the address format to be used by developers<br/>
           when interacting with the Zilliqa protocol.</template>
         </el-tooltip>
-      </label>
-      <input type="text" class="form-control mb-2" :value="base16" @change="handleBase16Change" />
-      <div class="text-danger text-small" v-if="base16Error">{{ base16Error }}</div>
-    </div>
-  </div>
+      </el-col>
+    </el-row>
+    <el-button type="primary" @click="handleConversion">Convert</el-button>
+  </el-dialog>
 </template>
 
-<script>
+<script setup>
 import { toBech32Address, fromBech32Address } from "@zilliqa-js/crypto";
 import { validation } from "@zilliqa-js/util";
+import { defineProps, ref} from "vue";
 
-export default {
-  data() {
-    return {
-      bech32: "",
-      bech32Error: false,
-      base16: "",
-      base16Error: false
-    };
-  },
-  methods: {
-    handleBech32Change(ev) {
-      this.bech32Error = false;
-      this.bech32 = ev.target.value;
+const bech32 = ref("");
+const base16 = ref("");
 
-      if (!validation.isBech32(this.bech32)) {
-        return (this.bech32Error = "The string is not a valid Bech32 address.");
-      } else {
-        this.base16 = fromBech32Address(this.bech32);
-      }
-    },
+defineProps(["show"]);    // Show or hide the dialog
 
-    handleBase16Change(ev) {
-      this.bech32Error = false;
-      this.base16 = ev.target.value;
-
-      if (!validation.isAddress(this.base16)) {
-        return (this.base16Error = "The string is not a valid Base16 address.");
-      } else {
-        this.bech32 = toBech32Address(this.base16);
-      }
+const handleConversion = () => {
+  if (bech32.value.length > 0) {
+    if (!validation.isBech32(bech32.value)) {
+      return "The string is not a valid Bech32 address.";
+    } else {
+      base16.value = fromBech32Address(bech32.value);
+    }
+  } else if (base16.value.length > 0) {
+    if (!validation.isAddress(base16.value)) {
+      return "The string is not a valid Base16 address.";
+    } else {
+      bech32.value = toBech32Address(base16.value);
     }
+  } else {
+
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -89,4 +84,8 @@ export default {
     height: 20px;
   }
 }
+
+.el-row {
+  margin-bottom: 20px;
+}
 </style>

products/neo-savant/src/components/Tools/UnitsConverter.vue

@@ -1,54 +1,55 @@
 <template>
-  <div class="panel">
-    <div class="form-group mb-2">
-      <label>Zil</label>
-      <input type="text" class="form-control mb-2" v-model="zil" @change="handleChangeZil" />
-    </div>
-
-    <div class="form-group mb-2">
-      <label>Li</label>
-      <input type="text" class="form-control mb-2" v-model="li" @change="handleChangeLi" />
-    </div>
-
-    <div class="form-group">
-      <label>Qa</label>
-      <input type="text" class="form-control mb-2" v-model="qa" @change="handleChangeQa" />
-    </div>
-  </div>
+    <el-dialog
+    :model-value="show"
+    title="Units Convertor"
+    width="500"
+  >
+    <el-form class="demo-form-inline" label-position="right" label-width="auto">
+      <el-form-item label="Zil">
+        <el-input v-model="zil" @change="handleChangeZil"/>
+      </el-form-item>
+      <el-form-item label="Li">
+        <el-input v-model="li" @change="handleChangeLi"/>
+      </el-form-item>
+      <el-form-item label="Qa">
+        <el-input v-model="qa" @change="handleChangeQa"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary">Convert</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>  
 </template>
 
-<script>
+<script setup>
+import { ref, defineProps } from "vue";
 import { BN, units } from "@zilliqa-js/util";
 
-export default {
-  data() {
-    return {
-      zil: 0,
-      li: 0,
-      qa: 0
-    };
-  },
-  methods: {
-    handleChangeZil() {
-      const qa = units.toQa(this.zil, units.Units.Zil);
-      this.li = units.fromQa(new BN(qa), units.Units.Li);
-      this.qa = qa;
-    },
-    handleChangeLi() {
-      const qa = units.toQa(this.li, units.Units.Li);
-      this.zil = units.fromQa(new BN(qa), units.Units.Zil);
-      this.qa = qa;
-    },
-    handleChangeQa() {
-      this.li = units.fromQa(new BN(this.qa), units.Units.Li);
-      this.zil = units.fromQa(new BN(this.qa), units.Units.Zil);
-    }
-  }
-};
+const zil = ref(0);
+const li = ref(0);
+const qa = ref(0);
+defineProps(['show'])
+
+const handleChangeZil = () => {
+  const qa_internal = units.toQa(zil.value, units.Units.Zil);
+  li.value = units.fromQa(new BN(qa_internal), units.Units.Li);
+  qa.value = qa_internal;
+}
+
+const handleChangeLi = () => {
+  const qa_internal = units.toQa(li.value, units.Units.Li);
+  zil.value = units.fromQa(new BN(qa_internal), units.Units.Zil);
+  qa.value = qa_internal;
+}
+
+const handleChangeQa = () => {
+  li.value = units.fromQa(new BN(qa.value), units.Units.Li);
+  zil.value = units.fromQa(new BN(qa.value), units.Units.Zil);
+}
 </script>
 
 <style lang="scss" scoped>
 .panel {
   margin-bottom: 2rem;
 }
-</style>
+</style>

products/neo-savant/src/components/Tools/index.vue

@@ -1,14 +1,6 @@
 <template>
-  <div class="tools-panel" v-if="toolsPanel">
-    <div class="header p-2">
-      <div class="title">{{ tool.name }}</div>
-      <img src="@/assets/close-color.svg" @click="handleClose" class="close-button" />
-    </div>
-    <div class="content p-4">
-      <units-converter v-if="toolsPanel === 'units-converter'" />
-      <address-converter v-if="toolsPanel === 'address-converter'" />
-    </div>
-  </div>
+  <units-converter :show="toolsPanel === 'units-converter'" />
+  <address-converter :show="toolsPanel === 'address-converter'" />
 </template>
 
 <script>
@@ -86,4 +78,4 @@ export default {
     }
   }
 }
-</style>
+</style>