updated decoder (#12)

Co-authored-by: Yehor Podporinov <[email protected]>
dl-solarity · Aug 15, 2023 · 4d70695 · 4d70695
1 parent 2a14fee
commit 4d70695
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 30 deletions.
diff --git a/forms/AbiDecodeForm.vue b/forms/AbiDecodeForm.vue
@@ -33,17 +33,28 @@
             {{ errorMessage }}
           </p>
         </div>
-        <div v-if="warningMessage" class="abi-decode-form__msg-wrp">
-          <icon
-            :class="['abi-decode-form__icon', 'abi-decode-form__icon--warning']"
-            :name="$icons.exclamationCircle"
-          />
-          <p :class="['abi-decode-form__msg', 'abi-decode-form__msg--warning']">
-            {{ warningMessage }}
-          </p>
-        </div>
         <template v-if="form.args.length">
           <h2>{{ $t('abi-decode-form.output-title') }}</h2>
+          <input-field
+            :model-value="funcSignature"
+            :label="$t('abi-decode-form.func-signature-label')"
+            :placeholder="$t('abi-decode-form.func-signature-placeholder')"
+            readonly
+          />
+          <div v-if="warningMessage" class="abi-decode-form__msg-wrp">
+            <icon
+              :class="[
+                'abi-decode-form__icon',
+                'abi-decode-form__icon--warning',
+              ]"
+              :name="$icons.exclamationCircle"
+            />
+            <p
+              :class="['abi-decode-form__msg', 'abi-decode-form__msg--warning']"
+            >
+              {{ warningMessage }}
+            </p>
+          </div>
           <div class="abi-decode-form__args_wrp">
             <div
               v-for="(arg, idx) in form.args"
@@ -145,6 +156,7 @@ import {
   bytes,
   checkIsBigInt,
   copyToClipboard,
+  createFunctionSignature,
   ethereumBaseType,
   getErrorMessage,
   parseFuncArgToValueOfEncode,
@@ -153,7 +165,7 @@ import {
 import { type ArrayElement, type FieldOption } from '@/types'
 import { fetcher } from '@distributedlab/fetcher'
 import { guessAbiEncodedData, guessFragment } from '@openchainxyz/abi-guesser'
-import { AbiCoder, FunctionFragment } from 'ethers'
+import { AbiCoder, FunctionFragment, ParamType } from 'ethers'
 import { debounce } from 'lodash-es'
 import { v4 as uuidv4 } from 'uuid'
 import { computed, reactive, ref, watch } from 'vue'
@@ -180,8 +192,11 @@ defineProps<{
   title: string
 }>()
 
+const DEFAULT_FUNCTION_NAME = 'function'
 const { t } = i18n.global
 
+const funcSignature = ref('')
+
 const errorMessage = ref('')
 const warningMessage = ref('')
 
@@ -303,12 +318,16 @@ const decodeAbi = async (): Promise<DecodedData> => {
 
           let funcFragment
           try {
-            funcFragment = FunctionFragment.from(
-              await fetchFuncSignature(funcSelector),
-            )
+            funcSignature.value = await fetchFuncSignature(funcSelector)
+            funcFragment = FunctionFragment.from(funcSignature.value)
           } catch {
             funcFragment = guessFragment(form.abiEncoding)
             if (!funcFragment) throw new errors.FunctionFragmentGuessError()
+
+            funcSignature.value = createFunctionSignature(
+              funcFragment.inputs as unknown as ParamType[],
+              DEFAULT_FUNCTION_NAME,
+            )
             warningMessage.value = t('abi-decode-form.func-is-guessed-warning')
           }
 
@@ -321,6 +340,10 @@ const decodeAbi = async (): Promise<DecodedData> => {
         const paramTypes = guessAbiEncodedData(form.abiEncoding)
         if (!paramTypes) throw new errors.ParamTypesGuessError()
 
+        funcSignature.value = createFunctionSignature(
+          paramTypes as unknown as ParamType[],
+        )
+
         types = paramTypes.map(type => type.format())
         values = decodeValues(types, form.abiEncoding)
 
@@ -335,6 +358,12 @@ const decodeAbi = async (): Promise<DecodedData> => {
         types = form.args.map(arg =>
           arg.type === ETHEREUM_TYPES.tuple ? arg.subtype : arg.type,
         )
+
+        funcSignature.value = createFunctionSignature(
+          types.map(type => ParamType.from(type)),
+          form.hasFuncSelector ? DEFAULT_FUNCTION_NAME : '',
+        )
+
         values = decodeValues(types, data)
 
         break
@@ -370,8 +399,11 @@ const onFormChange = async () => {
   if (!isFormValid()) {
     if (form.decodeMode === DECODE_MODES.auto) form.args.length = 0
     else form.args = form.args.map(arg => ({ ...arg, value: '' }))
+
     isDecoded.value = false
     errorMessage.value = ''
+    funcSignature.value = ''
+
     return
   }
 

diff --git a/forms/AbiEncodeForm.vue b/forms/AbiEncodeForm.vue
@@ -101,6 +101,7 @@ import {
   ErrorHandler,
   contractFuncName,
   copyToClipboard,
+  createFunctionSignature,
   ethereumBaseType,
   ethereumBaseTypeValue,
   json,
@@ -177,20 +178,6 @@ const onArgSubtypeUpdate = (
   form.args[argIdx].subtype = formatArgSubtype(newValue)
 }
 
-const createFuncSignature = (
-  name: string,
-  types: Array<AbiEncodeForm.FuncArg['type']>,
-): string => {
-  const _types = types.map(type => {
-    const paramType = ParamType.from(type)
-    return paramType.type.replaceAll('tuple(', '(').replaceAll('(', 'tuple(')
-  })
-
-  return name
-    ? `${name}(${_types.join(',')})`
-    : `constructor(${_types.join(',')})`
-}
-
 const encodeAbi = (types: string[], values: unknown[]): string => {
   if (!form.funcName) {
     const iface = new Interface([`constructor(${types.join(', ')})`])
@@ -215,7 +202,10 @@ const onFormChange = () => {
     )
     const values = form.args.map(parseFuncArgToValueOfEncode)
 
-    funcSignature.value = createFuncSignature(form.funcName, types)
+    funcSignature.value = createFunctionSignature(
+      types.map(type => ParamType.from(type)),
+      form.funcName,
+    )
     abiEncoding.value = encodeAbi(types, values)
   } catch (error) {
     resetOutput()
@@ -225,7 +215,7 @@ const onFormChange = () => {
 
 watch(form, onFormChange)
 
-funcSignature.value = createFuncSignature('', [])
+funcSignature.value = createFunctionSignature([])
 abiEncoding.value = encodeAbi([], [])
 </script>
 

diff --git a/helpers/ethereum.helpers.ts b/helpers/ethereum.helpers.ts
@@ -0,0 +1,14 @@
+import { ParamType } from 'ethers'
+
+export function createFunctionSignature(
+  paramTypes: ParamType[],
+  name?: string,
+): string {
+  const types = paramTypes.map(paramType =>
+    paramType.type.replaceAll('tuple(', '(').replaceAll('(', 'tuple('),
+  )
+
+  return name
+    ? `${name}(${types.join(',')})`
+    : `constructor(${types.join(',')})`
+}
diff --git a/helpers/index.ts b/helpers/index.ts
@@ -1,6 +1,7 @@
 export * from './abi-encode-form.helpers'
 export * from './error-handler.helper'
 export * from './errors.helpers'
+export * from './ethereum.helpers'
 export * from './event-bus.helper'
 export * from './clipboard.helpers'
 export * from './promise.helpers'

diff --git a/plugins/localization/resources/en.json b/plugins/localization/resources/en.json
@@ -87,6 +87,8 @@
     "arg-subtype-placeholder--tuple": "Enter type, e.g. tuple(address, tuple(uint256))",
     "add-arg-btn": "Add argument",
     "abi-decoding-copy-btn": "Copy decoding",
+    "func-signature-label": "Function signature",
+    "func-signature-placeholder": "Function signature",
     "func-is-guessed-warning": "The function signature has guessed"
   },
   "abi-encode-form": {
@@ -99,7 +101,7 @@
     "arg-subtype-label": "Value",
     "arg-subtype-placeholder--tuple": "Enter type, e.g. tuple(address, tuple(uint256))",
     "add-arg-btn": "Add argument",
-    "output-title": "Encoded",
+    "output-title": "Encoded data",
     "abi-encoding-label": "Abi encoding",
     "abi-encoding-placeholder": "Abi encoding",
     "abi-encoding-copy-btn": "Copy encoding",