From 5797c4e8991a0d28320f5f0c5f3fcb1034e7fea0 Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Thu, 21 Sep 2023 20:41:36 -0500
Subject: [PATCH] update: reworked base64 decoding/encoding UI logic

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/values/BlobValue.vue | 37 +++++++++++++++++++++--------
 src/pages/AccountDetails.vue        |  8 +++++--
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/components/values/BlobValue.vue b/src/components/values/BlobValue.vue
index 1d9365816..6f3053191 100644
--- a/src/components/values/BlobValue.vue
+++ b/src/components/values/BlobValue.vue
@@ -31,14 +31,19 @@
          :style="{'max-width': windowWidth-limitingFactor + 'px'}">{{ decodedValue }}</div>
     <div v-else-if="limitingFactor" class="h-is-one-line is-inline-block"
          :style="{'max-width': windowWidth-limitingFactor+200 + 'px'}">{{ decodedValue }}</div>
-    <div v-else-if="showEncodeButton" style="word-break: break-word" class="is-flex is-full is-align-items-center has-background-transparent has-border has-border-white is-radiusless">
+    <div v-else-if="showEncodeButton" style="word-break: break-word;">
       <div>{{ decodedValue }}</div>
-      <button
-        v-if="isBlobValueBase64candidate"
-        @click="base64TogglerFn"
-        class="button is-small has-text-white"
-        style="background-color: #202532; height: 26px; border:1px solid white; border-radius: 3px; margin-left: 1rem"
-      >{{ base64 ? "Decode data" : "Encode data" }}</button>
+      <div v-if="isBlobValueBase64candidate" class="is-flex">
+        <select 
+          v-model="base64OptionSelected" class="h-is-text-size-4 has-text-white" 
+          style="border-width: 0rem; padding: 0.25rem 0.25rem 0.25rem 0; background-color: transparent; cursor: pointer; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;"
+          >
+          <option v-for="f in base64Options" :key="f" :value="f">
+            {{ makeBase64OptionLabels(f) }}
+          </option>
+        </select>
+        <i class="fas fa-caret-down is-flex is-align-items-center"/>
+      </div>
     </div>
     <div v-else style="word-break: break-word">{{ decodedValue }}</div>
   </template>
@@ -83,10 +88,10 @@ export default defineComponent({
     base64Toggler: Function
   },
 
-  methods: {
-    base64TogglerFn() {
+  watch: {
+    base64OptionSelected(option: string) {
       if (this.base64Toggler) {
-        this.base64Toggler()
+        this.base64Toggler(option)
       }
     }
   },
@@ -94,7 +99,12 @@ export default defineComponent({
   setup(props) {
     const windowWidth = inject('windowWidth', 1280)
     const isMediumScreen = inject('isMediumScreen', true)
+    
     const base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
+    
+    type base64OptionsTypes = 'RAW' | 'BASE64_DECODED'
+    const base64OptionSelected = ref<base64OptionsTypes>('RAW')
+    const base64Options = ['RAW', "BASE64_DECODED"] as base64OptionsTypes[]
 
     const isURL = computed(() => {
       let result: boolean
@@ -153,6 +163,10 @@ export default defineComponent({
 
     const initialLoading = inject(initialLoadingKey, ref(false))
 
+    const makeBase64OptionLabels = (value: base64OptionsTypes) => {
+      return value === "RAW" ? "Original data" : "Decoded data"
+    }
+
     return {
       isMediumScreen,
       windowWidth,
@@ -161,6 +175,9 @@ export default defineComponent({
       decodedValue,
       initialLoading,
       isBlobValueBase64candidate,
+      base64Options,
+      base64OptionSelected,
+      makeBase64OptionLabels
     }
   }
 })
diff --git a/src/pages/AccountDetails.vue b/src/pages/AccountDetails.vue
index cdbb72a1a..cc0e39dfa 100644
--- a/src/pages/AccountDetails.vue
+++ b/src/pages/AccountDetails.vue
@@ -485,8 +485,12 @@ export default defineComponent({
     // base64 decoding controler
     //
     const base64Option = ref(false)
-    const base64Toggler = () => {
-      base64Option.value = !base64Option.value
+    const base64Toggler = (base64SelectedOption: string) => {
+      if (base64SelectedOption === "RAW") {
+        base64Option.value = false
+      } else {
+        base64Option.value = true
+      }
     }
 
     return {