Revert "feat: add display of contract disassembly in ContractDetails …

…page (#817) (#818)"

This reverts commit bafcf97.

src/AppStorage.ts

@@ -104,19 +104,6 @@ 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

src/components/Copyable.vue

@@ -25,7 +25,7 @@
 <template>
   <div class="shy-scope" style="display: inline-block; position: relative;">
     <slot name="content"/>
-    <div v-if="enableCopy && contentToCopy" id="shyCopyButton" class="shy"
+    <div v-if="contentToCopy" id="shyCopyButton" class="shy"
          style="position: absolute; left: 0; top: 0; width: 100%; height: 100%">
       <div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.50)"></div>
       <div v-if="enableCopy"

src/components/DashboardCard.vue

@@ -39,12 +39,12 @@
       <slot name="content"></slot>
     </div>
 
-    <div class="columns is-multiline h-is-property-text">
+    <div class="columns h-is-property-text">
 
-      <div class="column is-6-desktop" :class="{'is-full': !isMediumScreen}">
+      <div class="column">
           <slot name="leftContent"></slot>
       </div>
-      <div class="column is-6-desktop" :class="{'h-has-column-separator':slots.rightContent&&isMediumScreen}">
+      <div class="column" :class="{'h-has-column-separator':slots.rightContent}">
           <slot name="rightContent"></slot>
       </div>
 
@@ -69,10 +69,9 @@ export default defineComponent({
 
   setup() {
     const isSmallScreen = inject('isSmallScreen', true)
-    const isMediumScreen = inject('isMediumScreen', true)
     const isTouchDevice = inject('isTouchDevice', false)
     const slots = useSlots()
-    return { isSmallScreen, isMediumScreen, isTouchDevice, slots }
+    return { isSmallScreen, isTouchDevice, slots }
   }
 })
 

src/components/contract/ContractByteCodeSection.vue

@@ -76,29 +76,15 @@
                 </template>
             </Property>
             <Property id="solcVersion" :full-width="true">
-                <template v-slot:name>Solidity Compiler Version</template>
+                <template v-slot:name>Compiler Version</template>
                 <template v-slot:value>
                     <StringValue :string-value="solcVersion ?? undefined"/>
                 </template>
             </Property>
-            <div class="columns is-multiline h-is-property-text">
-                <div id="bytecode" class="column is-6" :class="{'is-full': !isSmallScreen}">
-                    <p class="has-text-weight-light">Runtime Bytecode</p>
-                    <ByteCodeValue :byte-code="byteCode ?? undefined" class="mt-3 mb-4"/>
-                </div>
-                <div id="assembly-code" class="column is-6" :class="{'h-has-column-separator':isSmallScreen}">
-                    <div class="is-flex is-align-items-center is-justify-content-space-between">
-                        <p class="has-text-weight-light">Assembly Bytecode</p>
-                        <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="showHexaOpcode">
-                            </label>
-                        </div>
-                    </div>
-                    <DisassembledCodeValue :byte-code="byteCode ?? undefined" :show-hexa-opcode="showHexaOpcode"/>
-                </div>
-            </div>
+            <Property id="code" :full-width="true">
+                <template v-slot:name>Runtime Bytecode</template>
+            </Property>
+            <ByteCodeValue :byte-code="byteCode ?? undefined" class="mt-3"/>
         </template>
     </DashboardCard>
 
@@ -116,7 +102,7 @@
 
 <script lang="ts">
 
-import {computed, defineComponent, inject, onMounted, PropType, ref, watch} from 'vue';
+import {computed, defineComponent, inject, PropType, ref} from 'vue';
 import DashboardCard from "@/components/DashboardCard.vue";
 import ByteCodeValue from "@/components/values/ByteCodeValue.vue";
 import StringValue from "@/components/values/StringValue.vue";
@@ -125,26 +111,14 @@ import {ContractAnalyzer} from "@/utils/analyzer/ContractAnalyzer";
 import {routeManager} from "@/router";
 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.`
 
 export default defineComponent({
   name: 'ContractByteCodeSection',
 
-  components: {
-      HexaValue,
-      DisassembledCodeValue,
-      ContractVerificationDialog,
-      InfoTooltip,
-      Property,
-      StringValue,
-      ByteCodeValue,
-      DashboardCard
-  },
+  components: {ContractVerificationDialog, InfoTooltip, Property, StringValue, ByteCodeValue, DashboardCard},
 
   props: {
     contractAnalyzer: {
@@ -180,10 +154,6 @@ export default defineComponent({
 
     const tooltipText = computed(() => isFullMatch.value ? FULL_MATCH_TOOLTIP : PARTIAL_MATCH_TOOLTIP)
 
-    const showHexaOpcode = ref(false)
-    onMounted(() => showHexaOpcode.value = AppStorage.getShowHexaOpcode())
-    watch(showHexaOpcode, () => AppStorage.setShowHexaOpcode(showHexaOpcode.value ? showHexaOpcode.value : null))
-
     return {
       isTouchDevice,
       isSmallScreen,
@@ -199,8 +169,7 @@ export default defineComponent({
       contractId: props.contractAnalyzer.contractId,
       byteCodeAnalyzer: props.contractAnalyzer.byteCodeAnalyzer,
       verifyDidComplete,
-      isFullMatch,
-      showHexaOpcode,
+      isFullMatch
     }
   }
 });

src/components/values/ByteCodeValue.vue

@@ -24,14 +24,14 @@
 
 <template>
 
-    <div v-if="textValue" id="bytecode"
-         class="pl-1 mt-2 mr-1 code-data-box">
-        <HexaValue :byte-string="textValue" :copyable="false"/>
-    </div>
+  <textarea v-if="textValue"
+            v-model="textValue"
+            readonly rows="4"
+            style="width:100%; font-family: novamonoregular,monospace"></textarea>
 
-    <span v-else-if="initialLoading"/>
+  <span v-else-if="initialLoading"/>
 
-    <span v-else class="has-text-grey">None</span>
+  <span v-else class="has-text-grey">None</span>
 
 </template>
 
@@ -43,24 +43,22 @@
 
 import {defineComponent, inject, ref, watch} from 'vue';
 import {initialLoadingKey} from "@/AppKeys";
-import HexaValue from "@/components/values/HexaValue.vue";
 
 export default defineComponent({
-    name: 'ByteCodeValue',
-    components: {HexaValue},
-
-    props: {
-        byteCode: String,
-    },
-
-    setup(props) {
-        const textValue = ref(props.byteCode)
-        watch(() => props.byteCode, () => {
-            textValue.value = props.byteCode
-        })
-        const initialLoading = inject(initialLoadingKey, ref(false))
-        return {textValue, initialLoading}
-    }
+  name: 'ByteCodeValue',
+
+  props: {
+    byteCode: String,
+  },
+
+  setup(props) {
+    const textValue = ref(props.byteCode)
+    watch(() => props.byteCode, () => {
+      textValue.value = props.byteCode
+    })
+    const initialLoading = inject(initialLoadingKey, ref(false))
+    return { textValue, initialLoading }
+  }
 });
 
 </script>
@@ -69,14 +67,4 @@ export default defineComponent({
 <!--                                                       STYLE                                                     -->
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
-<style>
-
-.code-data-box {
-    border: 0.5px solid dimgrey;
-    gap: 0.42rem;
-    max-height: 20rem;
-    overflow-y: auto;
-    min-height: 5rem
-}
-
-</style>
+<style/>

src/components/values/HexaValue.vue

@@ -72,10 +72,6 @@ export default defineComponent({
     wordWrapSmall: {
       type: Number,
       default: null
-    },
-    copyable: {
-        type:Boolean,
-        default: true
     }
   },
 
@@ -105,7 +101,7 @@ export default defineComponent({
     }
 
     const isCopyEnabled = computed(() => {
-      return props.copyable && (normByteString.value?.length ?? 0) >= 1
+      return (normByteString.value?.length ?? 0) >= 1
     })
 
     // 4)