Proposal for an unified interpretation data type (#78)

* Proposal for an unified interpretation data type

* Add uniswapv3 swap interpretation

* Add standard library of utilities to share across interpreters

* Add default fallback interpreter

* Use interpreters from the package in the web playground

* Remove empty replace

* Add an initial implementation for 1inch and hop-protocol

* Add changeset

Author: Ferossgp

.changeset/big-jobs-beg.md

@@ -0,0 +1,5 @@
+---
+'@3loop/transaction-interpreter': minor
+---
+
+Add a common data type to return it from all interpreters. Additionally added a couple of more examples of interpretators and a fallback interpretator.

README.md

@@ -19,11 +19,19 @@ Transaction decoding is a crucial component of many dApps. Our goal is to create
 
 Currently, the available EVM transaction decoders require developers to use specific databases or provide a lower-level API that requires maintenance. The Loop Decoder, however, can be used as a plug-and-play component in any layer of dApp infrastructure.
 
+The open-source nature of the Loop Decoder allows developers to also integrate new chains as they see fit. While using a third party closed-source decoder, developers are limited to the chains that the provider supports. This can be a significant burden for developers who want to support multiple emerging chains.
+
+### Glossary
+
+- **Transaction Decoder**: Decoder automates the decoding of any transaction data, event log and trace, in a unified format. We leverage multiple data sources for contract metadata and ABI resolution. With an unified interface to decode transactions across any protocol, developers don't have to manually understand and decode each individual transactions.
+- **Transaction Interpreter**: Interpreter is a flexible layer that allows developers to define custom interpretation of a decoded transactions. In context of this library, an interpretation is a transformation from a decoded transaction to a human-readable format. It is used to extract the most significant information that can be directly displayed to a non techincal user.
+
 ## Features
 
 - [x] Can be used in any JavaScript environment
 - [x] Minimal external dependencies - connect your own storage
 - [x] Predefined ABI and Contract metadata resolvers
+- [x] Automatically resolves contract proxise and multicalls
 - [x] Flexible interpreter that allows you to define any custom interpretation of EVM transactions.
 
 ## Examples

apps/web/src/app/contract/[contract]/table.tsx

@@ -1,51 +1,24 @@
 'use client'
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import React from 'react'
-import { DecodedTx } from '@3loop/transaction-decoder'
+import type { DecodedTx } from '@3loop/transaction-decoder'
 import { findAndRunInterpreter, Interpretation } from '@/lib/interpreter'
-import { defaultInterpreters } from '@/lib/default-interpreters'
-import { Interpreter } from '@3loop/transaction-interpreter'
-
-function getAvaliableinterpreters() {
-  if (typeof window === 'undefined') return undefined
-
-  let res: Interpreter[] = []
-
-  for (const interpreter of defaultInterpreters) {
-    const stored = window.localStorage.getItem(interpreter.id)
-    if (stored) {
-      const updatedSchema = JSON.parse(stored)
-
-      res.push({
-        ...interpreter,
-        schema: updatedSchema,
-      })
-    } else {
-      res.push(interpreter)
-    }
-  }
-
-  return res
-}
 
 export default function TxTable({ txs }: { txs: DecodedTx[] }) {
   const [result, setResult] = React.useState<Interpretation[]>([])
-  const [interpreters] = React.useState(getAvaliableinterpreters)
 
   React.useEffect(() => {
     async function run() {
-      if (interpreters == null) return
-
       const withIntepretations = await Promise.all(
         txs.map((tx) => {
-          return findAndRunInterpreter(tx, interpreters)
+          return findAndRunInterpreter(tx)
         }),
       )
 
       setResult(withIntepretations)
     }
     run()
-  }, [interpreters, txs])
+  }, [txs])
 
   return (
     <Table>

apps/web/src/app/tx/[chainID]/[hash]/form.tsx

@@ -12,18 +12,32 @@ import { DecodedTx } from '@3loop/transaction-decoder'
 import { Interpretation, applyInterpreter } from '@/lib/interpreter'
 import CodeBlock from '@/components/ui/code-block'
 import { NetworkSelect } from '@/components/ui/network-select'
-import { Interpreter } from '@3loop/transaction-interpreter'
+import { fallbackInterpreter, getInterpreterForContract } from '@3loop/transaction-interpreter'
 
 interface FormProps {
   currentChainID: number
   decoded?: DecodedTx
-  defaultInterpreter?: Interpreter
   currentHash?: string
 }
 
-export default function DecodingForm({ decoded, defaultInterpreter, currentHash, currentChainID }: FormProps) {
+export default function DecodingForm({ decoded, currentHash, currentChainID }: FormProps) {
   const [result, setResult] = React.useState<Interpretation>()
-  const [schema, setSchema] = useLocalStorage(defaultInterpreter?.id ?? 'unknown', defaultInterpreter?.schema)
+  const [persistedSchema, setSchema] = useLocalStorage(decoded?.toAddress ?? 'unknown', '')
+
+  const schema = React.useMemo(() => {
+    if (persistedSchema !== '') return persistedSchema
+
+    if (decoded?.toAddress == null) return null
+
+    const schema = getInterpreterForContract({
+      address: decoded.toAddress,
+      chain: decoded.chainID,
+    })
+
+    if (schema != null) return schema
+
+    return fallbackInterpreter
+  }, [decoded?.chainID, decoded?.toAddress, persistedSchema])
 
   const router = useRouter()
 
@@ -34,24 +48,24 @@ export default function DecodingForm({ decoded, defaultInterpreter, currentHash,
   }
 
   const onRun = React.useCallback(() => {
-    if (schema && defaultInterpreter != null && decoded != null) {
+    if (schema && decoded != null) {
       const newInterpreter = {
-        ...defaultInterpreter,
+        id: decoded.toAddress ?? 'unknown',
         schema: schema,
       }
 
       applyInterpreter(decoded, newInterpreter).then((res) => {
         setResult(res)
       })
     }
-  }, [schema, decoded, defaultInterpreter])
+  }, [schema, decoded])
 
   // Run the interpreter on page load
   React.useEffect(() => {
-    if (schema && defaultInterpreter != null && decoded != null && result == null) {
+    if (schema && decoded != null && result == null) {
       onRun()
     }
-  }, [schema, decoded, defaultInterpreter, result, onRun])
+  }, [schema, decoded, result, onRun])
 
   return (
     <div className="grid h-full items-stretch gap-6 grid-cols-1 lg:grid-cols-[1fr_200px]">
@@ -86,7 +100,7 @@ export default function DecodingForm({ decoded, defaultInterpreter, currentHash,
 
             <CodeBlock
               language="javascript"
-              value={schema}
+              value={schema ?? ''}
               onChange={(value) => setSchema(value)}
               lineNumbers={true}
               readonly={false}

apps/web/src/app/tx/[chainID]/[hash]/page.tsx

@@ -1,30 +1,16 @@
 import * as React from 'react'
 import DecodingForm from './form'
 import { decodeTransaction } from '@/lib/decode'
-import { emptyInterpreter, findInterpreter } from '@/lib/interpreter'
-import { defaultInterpreters } from '@/lib/default-interpreters'
 
 export default async function TransactionPage({ params }: { params: { hash: string; chainID: number } }) {
   const decoded = await decodeTransaction({
     hash: params.hash,
     chainID: params.chainID,
   })
 
-  if (!decoded) {
+  if (!decoded || !decoded.toAddress) {
     return <DecodingForm currentHash={params.hash} currentChainID={params.chainID} />
   }
 
-  const interpreter = findInterpreter({
-    decodedTx: decoded,
-    interpreters: defaultInterpreters,
-  })
-
-  return (
-    <DecodingForm
-      decoded={decoded}
-      defaultInterpreter={interpreter || emptyInterpreter}
-      currentHash={params.hash}
-      currentChainID={params.chainID}
-    />
-  )
+  return <DecodingForm decoded={decoded} currentHash={params.hash} currentChainID={params.chainID} />
 }