feat: flag call signature decoded with 4byte.directory (#951)

Signed-off-by: Eric Le Ponner <eric.leponner@icloud.com>
Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
Co-authored-by: Simon Viénot <simon.vienot@icloud.com>

src/components/values/SignatureValue.vue

@@ -26,6 +26,14 @@
   <div v-if="functionHash">
     <HexaValue :byte-string="functionHash" show-none/>
     <div class="h-is-extra-text h-is-text-size-3 should-wrap">{{ signature }}</div>
+    <div v-if="is4byteSignature" class="mt-1">
+        <o-tooltip label="Decoding of the signature provided by the 4byte.directory Signature Database"
+                   :delay="200"
+                   multiline="multiline"
+                   class="h-tooltip">
+            <span class="h-has-pill h-is-text-size-1 has-background-grey" style="cursor:default;">4byte</span>
+        </o-tooltip>
+    </div>
   </div>
   <div v-else-if="initialLoading"/>
   <div v-else class="has-text-grey">None</div>
@@ -58,6 +66,7 @@ export default defineComponent({
     return {
       functionHash: props.analyzer.functionHash,
       signature: props.analyzer.signature,
+      is4byteSignature: props.analyzer.is4byteSignature,
       initialLoading
     }
   }

src/utils/analyzer/FunctionCallAnalyzer.ts

@@ -32,6 +32,7 @@ export class FunctionCallAnalyzer {
     private readonly contractAnalyzer: ContractAnalyzer
     private readonly signatureResponse = shallowRef<SignatureResponse|null>(null)
     private readonly functionFragment = shallowRef<ethers.FunctionFragment|null>(null)
+    private readonly is4byteFunctionFragment = ref<boolean>(false)
     private readonly functionDecodingFailure = shallowRef<unknown>(null)
     private readonly inputResult = shallowRef<ethers.Result|null>(null)
     private readonly inputDecodingFailure = shallowRef<unknown>(null)
@@ -101,6 +102,10 @@ export class FunctionCallAnalyzer {
         return this.functionFragment.value?.format() ?? null
     })
 
+    public readonly is4byteSignature: ComputedRef<boolean> = computed(() => {
+        return this.is4byteFunctionFragment.value
+    })
+
     public readonly errorSignature: ComputedRef<string|null> = computed(() => {
         return this.errorDescription.value?.signature ?? null
     })
@@ -236,9 +241,11 @@ export class FunctionCallAnalyzer {
                 try {
                     this.functionFragment.value = i.getFunction(functionHash)
                     this.functionDecodingFailure.value = null
+                    this.is4byteFunctionFragment.value = false
                 } catch(failure) {
                     this.functionFragment.value = null
                     this.functionDecodingFailure.value = failure
+                    this.is4byteFunctionFragment.value = false
                 }
             } else if (r !== null && r.results.length >= 1) {
                 let r0: SignatureRecord|null
@@ -256,17 +263,21 @@ export class FunctionCallAnalyzer {
                 if (r0 !== null) {
                     this.functionFragment.value = ethers.FunctionFragment.from(r0.text_signature)
                     this.functionDecodingFailure.value = null
+                    this.is4byteFunctionFragment.value = true
                 } else {
                     this.functionFragment.value = null
                     this.functionDecodingFailure.value = null
+                    this.is4byteFunctionFragment.value = false
                 }
             } else {
                 this.functionFragment.value = null
                 this.functionDecodingFailure.value = null
+                this.is4byteFunctionFragment.value = false
             }
         } else {
             this.functionFragment.value = null
             this.functionDecodingFailure.value = null
+            this.is4byteFunctionFragment.value = false
         }
     }
 
@@ -346,8 +357,7 @@ export class FunctionCallAnalyzer {
             && paramType.name == "responseCode"
             && typeof value == "bigint") {
             // It's a responseCode from a system contract
-            const message = labelForResponseCode(value)
-            return message
+            return labelForResponseCode(value)
         } else {
             return null
         }

tests/unit/App.spec.ts

@@ -93,7 +93,6 @@ describe("App.vue", () => {
 
         const navBar = wrapper.findComponent(TopNavBar)
         expect(navBar.exists()).toBe(true)
-        console.log(navBar.text())
         expect(navBar.text()).toBe(
             "Connect WalletCANCELCONNECT DisclaimerPlease don't show me this next timeCANCELAGREEDashboardTransactionsTokensTopicsContractsAccountsNodesBlocksCUSTOMNET1CUSTOMNET2CUSTOMNET3CONNECT WALLET...")