Update interpreters

README.md

@@ -1,3 +1,5 @@
+# Status: 🚧 In active development
+
 # Loop Decoder
 
 ## Decode and interpret any EVM-based transactions

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

@@ -9,28 +9,25 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import React from "react";
-import { findAndRunInterpreter } from "../../utils";
-import { Interpreter, data } from "../../data";
-import { DecodedTx } from "@3loop/transaction-decoder";
+import { DecodedTx, Interpreter } from "@3loop/transaction-decoder";
+import { findAndRunInterpreter, defaultinterpreters } from "@/lib/interpreter";
 
-function getAvaliableInterpretors() {
+function getAvaliableinterpreters() {
   if (typeof window === "undefined") return undefined;
 
-  const defaultInterpretors = Object.values(data).map((d) => d.interpreter);
   let res: Interpreter[] = [];
 
-  for (const interpretor of defaultInterpretors) {
-    const stored = window.localStorage.getItem(interpretor.id);
+  for (const interpreter of defaultinterpreters) {
+    const stored = window.localStorage.getItem(interpreter.id);
     if (stored) {
-      const prepare = JSON.parse(stored);
+      const updatedSchema = JSON.parse(stored);
 
       res.push({
-        id: interpretor.id,
-        schema: prepare,
-        canInterpret: interpretor.canInterpret,
+        ...interpreter,
+        schema: updatedSchema,
       });
     } else {
-      res.push(interpretor);
+      res.push(interpreter);
     }
   }
 
@@ -44,7 +41,7 @@ export default function TxTable({ txs }: { txs: DecodedTx[] }) {
       interpretation: any;
     }[]
   >([]);
-  const [intepretors] = React.useState(getAvaliableInterpretors);
+  const [intepretors] = React.useState(getAvaliableinterpreters);
 
   React.useEffect(() => {
     async function run() {

apps/web/src/app/data.ts

@@ -1,83 +1,23 @@
-export interface Interpreter {
-  schema: string;
-  canInterpret: string;
-  id: string;
-}
-
-export interface Data {
-  [key: string]: {
-    name: string;
-    interpreter: Interpreter;
-  };
-}
-
-export const data: Data = {
-  "0xc0bd04d7e94542e58709f51879f64946ff4a744e1c37f5f920cea3d478e115d7": {
+export const aaveV2 = "0x7d2768de32b0b80b7a3454c06bdac94a69ddc7a9";
+export const transactions = [
+  {
     name: "Repay",
-    interpreter: {
-      id: "aave-repay",
-      schema: `
-{
-    "action": "User repaid " & assetsSent[1].amount & " " & assetsSent[1].symbol,
-    "txHash": txHash,
-    "user": fromAddress,
-    "method": methodCall.name,
-    "assetsSent": assetsSent
-}
-      `,
-      canInterpret: `methodCall.name = "repay" and  toAddress = "0x7d2768dE32b0b80b7a3454c06BdAc94A69DDc7A9" ? true : false`,
-    },
+    hash: "0xc0bd04d7e94542e58709f51879f64946ff4a744e1c37f5f920cea3d478e115d7",
   },
-  "0xe61092c0ce50d7cf7c43a060c3ca023f16f99729ccae7a6d011e408d93d6f93f": {
+  {
     name: "Deposit",
-    interpreter: {
-      id: "aave-deposit",
-      schema: `
-{
-    "action": "User deposited " & assetsSent[0].amount & " " & assetsSent[0].symbol,
-    "txHash": txHash,
-    "user": fromAddress,
-    "method": methodCall.name,
-    "assetsSent": assetsSent
-}
-      `,
-      canInterpret: `methodCall.name = "deposit" and  toAddress = "0x7d2768dE32b0b80b7a3454c06BdAc94A69DDc7A9" ? true : false`,
-    },
+    hash: "0xe61092c0ce50d7cf7c43a060c3ca023f16f99729ccae7a6d011e408d93d6f93f",
   },
-  "0x1fc39eea9247cd9aa9d311bf83666afa6c9b30d66515d313e4d04dcb07a73a8f": {
+  {
     name: "Borrow",
-    interpreter: {
-      id: "aave-borrow",
-      schema: `
-{
-    "action": "User borrowed " & assetsReceived[1].amount & " " & assetsReceived[1].symbol,
-    "txHash": txHash,
-    "user": fromAddress,
-    "method": methodCall.name,
-    "assetsReceived": assetsReceived
-}
-      `,
-      canInterpret: `methodCall.name = "borrow" and  toAddress = "0x7d2768dE32b0b80b7a3454c06BdAc94A69DDc7A9" ? true : false`,
-    },
+    hash: "0x1fc39eea9247cd9aa9d311bf83666afa6c9b30d66515d313e4d04dcb07a73a8f",
   },
-  "0xf42e5d28e2fea319cf3675c57c57849ad5d178f17f8a17c94c7607321cf1b959": {
+  {
     name: "Withdraw",
-    interpreter: {
-      id: "aave-withdraw",
-      schema: `
-{
-    "action": "User withdrew " & assetsReceived[0].amount & " " & assetsReceived[0].symbol,
-    "txHash": txHash,
-    "user": fromAddress,
-    "method": methodCall.name,
-    "assetsReceived": assetsReceived
-}
-      `,
-      canInterpret: `methodCall.name = "withdraw" and  toAddress = "0x7d2768dE32b0b80b7a3454c06BdAc94A69DDc7A9" ? true : false`,
-    },
+    hash: "0xf42e5d28e2fea319cf3675c57c57849ad5d178f17f8a17c94c7607321cf1b959",
   },
-};
+];
 
-export const aaveV2 = "0x7d2768de32b0b80b7a3454c06bdac94a69ddc7a9";
-export const defaultTrasaction = Object.keys(data)[0];
+export const defaultTrasaction = transactions[0];
 export const defaultContract = aaveV2;
+export const defaultChainID = 1;

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

@@ -2,8 +2,7 @@
 import * as React from "react";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { Interpreter, data } from "../../data";
-import { runInterpreter } from "../../utils";
+import { transactions } from "../../data";
 import { useLocalStorage } from "usehooks-ts";
 import { SidebarNav } from "@/components/ui/sidebar-nav";
 import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
@@ -15,12 +14,13 @@ import {
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
-import { DecodedTx } from "@3loop/transaction-decoder";
+import { DecodedTx, Interpreter } from "@3loop/transaction-decoder";
+import { interpretTx } from "@/lib/interpreter";
 
-export const sidebarNavItems = Object.keys(data).map((tx) => {
+export const sidebarNavItems = transactions.map((tx) => {
   return {
-    href: `/tx/${tx}`,
-    title: `${data[tx]["name"]} tx ${tx.slice(0, 6)}...`,
+    href: `/tx/${tx.hash}`,
+    title: `${tx.name} tx ${tx.hash.slice(0, 6)}...`,
   };
 });
 
@@ -52,12 +52,11 @@ export default function DecodingForm({
   React.useEffect(() => {
     if (schema && defaultInterpreter != null && decoded != null) {
       const newInterpreter = {
-        id: defaultInterpreter.id,
-        canInterpret: defaultInterpreter.canInterpret,
+        ...defaultInterpreter,
         schema: schema,
       };
 
-      runInterpreter(decoded, newInterpreter).then((res) => {
+      interpretTx(decoded, newInterpreter).then((res) => {
         setResult(res);
       });
     }
@@ -128,8 +127,7 @@ export default function DecodingForm({
                               JSONata
                             </a>
                             {` is a lightweight query and transformation language
-                            for JSON data. To get the list of assets sent and received in tx, use predifined varibales 
-                            $assetsReceived and $assetsSent.`}
+                            for JSON data.`}
                           </p>
                         </div>
                       </HoverCardContent>

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import DecodingForm from "./form";
-import { findInterpreter } from "../../utils";
-import { Interpreter, data } from "../../data";
 import { decodeTransaction } from "@/lib/decode";
+import { defaultinterpreters, emptyinterpreter } from "@/lib/interpreter";
+import { findInterpreter } from "@3loop/transaction-decoder";
 
 export default async function TransactionPage({
   params,
@@ -18,20 +18,16 @@ export default async function TransactionPage({
     return <DecodingForm currentHash={params.hash} />;
   }
 
-  const defaultIntepretors = Object.values(data).map((d) => d.interpreter);
-  const intepretor = await findInterpreter(decoded, defaultIntepretors);
+  const intepretor = await findInterpreter({
+    decodedTx: decoded,
+    interpreters: defaultinterpreters,
+  });
 
   if (!intepretor) {
-    const newInterpreter: Interpreter = {
-      id: "default",
-      canInterpret: "txHash ? true : false",
-      schema: "",
-    };
-
     return (
       <DecodingForm
         decoded={decoded}
-        defaultInterpreter={newInterpreter}
+        defaultInterpreter={emptyinterpreter}
         currentHash={params.hash}
       />
     );

apps/web/src/lib/etherscan.ts

@@ -5,33 +5,6 @@ const endpoints: { [k: number]: string } = {
   5: "https://api-goerli.etherscan.io/api",
 };
 
-export async function fetchContractABI(
-  address: string,
-  chainID: number,
-): Promise<string | null> {
-  const apikey = process.env.ETHERSCAN_API_KEY;
-  if (!apikey) {
-    console.warn("Missing ETHERSCAN_API_KEY");
-  }
-
-  const endpoint = endpoints[chainID];
-
-  const params = new URLSearchParams({
-    module: "contract",
-    action: "getabi",
-    address: address,
-    apikey: apikey || "",
-  });
-
-  const response = await fetch(`${endpoint}?${params.toString()}`);
-  const json = (await response.json()) as { status: string; result: string };
-
-  if (json.status === "1") {
-    return json.result;
-  }
-  return null;
-}
-
 export interface Transfer {
   timeStamp: string;
   uniqueId: string;