Save 'Show hexa opcode' user pref in local storage.

Signed-off-by: Simon Viénot <[email protected]>
hashgraph · Dec 26, 2023 · 48da731 · 48da731
1 parent aa1de01
commit 48da731
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 10 deletions.
diff --git a/src/AppStorage.ts b/src/AppStorage.ts
@@ -104,6 +104,19 @@ export class AppStorage {
         AppStorage.createCookie(AppStorage.COOKIE_POLICY_NAME, policy, AppStorage.COOKIE_POLICY_VALIDITY)
     }
 
+    //
+    // display hexa opcodes in assembly code
+    //
+
+    private static readonly SHOW_HEXA_OPCODE_KEY = 'hexaOpcode'
+
+    public static getShowHexaOpcode(): boolean {
+        return  this.getLocalStorageItem(this.SHOW_HEXA_OPCODE_KEY) != null
+    }
+
+    public static setShowHexaOpcode(newValue: boolean|null): void {
+        this.setLocalStorageItem(this.SHOW_HEXA_OPCODE_KEY, newValue ? "true" : null)
+    }
 
     //
     // Private

diff --git a/src/components/contract/ContractByteCodeSection.vue b/src/components/contract/ContractByteCodeSection.vue
@@ -92,11 +92,11 @@
                         <div class="is-flex is-align-items-center is-justify-content-end">
                             <p class="has-text-weight-light">Show hexa opcode</p>
                             <label class="checkbox pt-1 ml-3">
-                                <input type="checkbox" v-model="showOpcodeHexa">
+                                <input type="checkbox" v-model="showHexaOpcode">
                             </label>
                         </div>
                     </div>
-                    <DisassembledCodeValue :byte-code="byteCode ?? undefined" :show-opcode-hexa="showOpcodeHexa"/>
+                    <DisassembledCodeValue :byte-code="byteCode ?? undefined" :show-hexa-opcode="showHexaOpcode"/>
                 </div>
             </div>
         </template>
@@ -116,7 +116,7 @@
 
 <script lang="ts">
 
-import {computed, defineComponent, inject, PropType, ref} from 'vue';
+import {computed, defineComponent, inject, onMounted, PropType, ref, watch} from 'vue';
 import DashboardCard from "@/components/DashboardCard.vue";
 import ByteCodeValue from "@/components/values/ByteCodeValue.vue";
 import StringValue from "@/components/values/StringValue.vue";
@@ -127,6 +127,7 @@ import InfoTooltip from "@/components/InfoTooltip.vue";
 import ContractVerificationDialog from "@/components/verification/ContractVerificationDialog.vue";
 import DisassembledCodeValue from "@/components/values/DisassembledCodeValue.vue";
 import HexaValue from "@/components/values/HexaValue.vue";
+import {AppStorage} from "@/AppStorage";
 
 const FULL_MATCH_TOOLTIP = `A Full Match indicates that the bytecode of the deployed contract is byte-by-byte the same as the compilation output of the given source code files with the settings defined in the metadata file. This means the contents of the source code files and the compilation settings are exactly the same as when the contract author compiled and deployed the contract.`
 const PARTIAL_MATCH_TOOLTIP = `A Partial Match indicates that the bytecode of the deployed contract is the same as the compilation output of the given source code files except for the metadata hash. This means the deployed contract and the given source code + metadata function in the same way but there are differences in source code comments, variable names, or other metadata fields such as source paths.`
@@ -179,7 +180,9 @@ export default defineComponent({
 
     const tooltipText = computed(() => isFullMatch.value ? FULL_MATCH_TOOLTIP : PARTIAL_MATCH_TOOLTIP)
 
-    const showOpcodeHexa = ref(false)
+    const showHexaOpcode = ref(false)
+    onMounted(() => showHexaOpcode.value = AppStorage.getShowHexaOpcode())
+    watch(showHexaOpcode, () => AppStorage.setShowHexaOpcode(showHexaOpcode.value ? showHexaOpcode.value : null))
 
     return {
       isTouchDevice,
@@ -197,7 +200,7 @@ export default defineComponent({
       byteCodeAnalyzer: props.contractAnalyzer.byteCodeAnalyzer,
       verifyDidComplete,
       isFullMatch,
-      showOpcodeHexa,
+      showHexaOpcode,
     }
   }
 });

diff --git a/src/components/values/DisassembledCodeValue.vue b/src/components/values/DisassembledCodeValue.vue
@@ -25,7 +25,7 @@
 <template>
     <div v-if="disassembly" id="disassembly" class="mt-2 p-2 is-flex analyzed-data-box">
         <div v-for="opcode in disassembly" v-if="disassembly && disassembly.length > 0" :key="opcode.index16">
-            <OpcodeValue :opcode="opcode" :show-opcode-hexa="showOpcodeHexa"/>
+            <OpcodeValue :opcode="opcode" :show-hexa-opcode="showHexaOpcode"/>
         </div>
         <p v-else class="has-text-grey is-italic has-text-weight-medium">{{ disassembledError }}</p>
     </div>
@@ -57,7 +57,7 @@ export default defineComponent({
             type: String,
             default: ""
         },
-        showOpcodeHexa: {
+        showHexaOpcode: {
             type: Boolean,
             default: false
         }

diff --git a/src/components/values/OpcodeValue.vue b/src/components/values/OpcodeValue.vue
@@ -25,8 +25,8 @@
 <template>
     <div class="is-flex" style="gap: 0.5rem">
         <p class="has-text-grey">{{ opcode.index16 }}:</p>
-        <p v-if="showOpcodeHexa" class="h-is-extra-text">{{ opcode.hex }}</p>
-        <p v-if="showOpcodeHexa" class="has-text-grey">-</p>
+        <p v-if="showHexaOpcode" class="h-is-extra-text">{{ opcode.hex }}</p>
+        <p v-if="showHexaOpcode" class="has-text-grey">-</p>
         <p :class="{'has-text-grey':isInvalidOpcode}">{{ opcode.mnemonic }}</p>
         <div v-if="opcode.operand.length > 0" class="ml-">
             <ContractLink v-if="contract" :contract-id="displayAddress"/>
@@ -65,7 +65,7 @@ export default defineComponent({
             type: Object as PropType<DisassembledOpcodeOutput>,
             required: true
         },
-        showOpcodeHexa: {
+        showHexaOpcode: {
             type: Boolean,
             default: false
         }