feat: use the new txtracer-core library with faster tracing, remove waits for rate limits, add TON Core and TON Center to footer (#110)

Author: i582

package.json

@@ -39,7 +39,7 @@
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "ton-assembly": "0.2.4",
-    "txtracer-core": "^0.1.1"
+    "txtracer-core": "^0.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

src/features/tasm/lib/executor.ts

@@ -1,13 +1,11 @@
-import {runtime as i, text} from "ton-assembly"
+import {runtime as i, text, trace} from "ton-assembly"
 import type {Address, Contract, ContractProvider, Sender, StateInit, TupleReader} from "@ton/core"
 import {Cell, contractAddress, toNano, TupleBuilder} from "@ton/core"
 import {GetMethodError, type SandboxContract, type TreasuryContract} from "@ton/sandbox"
 import {Blockchain} from "@ton/sandbox"
 import {createMappingInfo, type MappingInfo} from "ton-assembly/dist/trace/mapping"
 import type {StackElement} from "ton-assembly/dist/trace"
 
-import {trace} from "ton-assembly"
-
 import {type ExitCode, findExitCode} from "@features/txTrace/lib/traceTx.ts"
 
 function stackElementsToTupleBuilder(stackElements: StackElement[]): TupleBuilder {

src/features/txTrace/lib/traceTx.ts

@@ -60,13 +60,11 @@ async function maybeTestnet(link: string): Promise<{result: TraceResult; network
   }
 
   try {
-    await wait(500) // rate limit
     const result = await retraceAny(txLinkInfo ?? SingleHash(link, false))
     return {result, network: txLinkInfo?.testnet ? "testnet" : "mainnet"}
   } catch (error: unknown) {
     if (error instanceof Error && error.message.includes("Cannot find transaction info")) {
       console.log("Cannot find in mainnet, trying to find in testnet")
-      await wait(500) // rate limit
       const result = await retraceAny(txLinkInfo ?? SingleHash(link, true))
       return {result, network: "testnet"}
     }
@@ -238,7 +236,3 @@ export function normalizeGas(step: Step) {
   }
   return step.gasCost
 }
-
-async function wait(delay: number): Promise<unknown> {
-  return new Promise(resolve => setTimeout(resolve, delay))
-}

src/pages/InstructionsPage/components/InstructionTable/operands.tsx

@@ -1,6 +1,5 @@
 import type {Arg, ArgRange, Args, Child} from "@features/spec/tvm-specification.types"
-import {ArgsEnum} from "@features/spec/tvm-specification.types"
-import {Bits} from "@features/spec/tvm-specification.types"
+import {ArgsEnum, Bits} from "@features/spec/tvm-specification.types"
 
 import styles from "./OperandsView.module.css"
 

src/pages/SandboxPage/components/TransactionTraceViewer/TransactionTraceViewer.tsx

@@ -1,18 +1,17 @@
-import React, {Suspense, useMemo} from "react"
+import {Suspense, useMemo, lazy} from "react"
 import {FiX} from "react-icons/fi"
 
 import type {TransactionInfo} from "@features/sandbox/lib/transaction"
 import type {ContractData} from "@features/sandbox/lib/contract"
-import {traceSandboxTransaction} from "@features/txTrace/lib/traceTx"
+import {traceSandboxTransaction, normalizeGas} from "@features/txTrace/lib/traceTx"
 import {useLineExecutionData, useTraceStepper} from "@features/txTrace/hooks"
 import TraceSidePanel from "@shared/ui/TraceSidePanel"
 import InlineLoader from "@shared/ui/InlineLoader"
 import {type InstructionDetail} from "@features/txTrace/ui/StepInstructionBlock"
-import {normalizeGas} from "@features/txTrace/lib/traceTx"
 
 import styles from "./TransactionTraceViewer.module.css"
 
-const CodeEditor = React.lazy(() => import("@shared/ui/CodeEditor"))
+const CodeEditor = lazy(() => import("@shared/ui/CodeEditor"))
 
 export interface TransactionTraceViewerProps {
   readonly tx: TransactionInfo

src/pages/SandboxPage/components/TransactionTree/TransactionTree.tsx

@@ -9,11 +9,9 @@ import type {TestData} from "@features/sandbox/lib/test-data.ts"
 import {findOpcodeABI, type TransactionInfo} from "@features/sandbox/lib/transaction.ts"
 import type {ContractData} from "@features/sandbox/lib/contract"
 import {parseSliceWithAbiType, type ParsedObjectByABI} from "@features/sandbox/lib/abi/parser.ts"
-import {TransactionShortInfo} from "@app/pages/SandboxPage/components"
+import {TransactionShortInfo, ContractDetails} from "@app/pages/SandboxPage/components"
 import {ParsedDataView} from "@features/sandbox/ui/abi"
 
-import {ContractDetails} from "@app/pages/SandboxPage/components"
-
 import {useTooltip} from "./useTooltip"
 import {SmartTooltip} from "./SmartTooltip"
 

src/pages/TracePage/TracePage.module.css

@@ -397,11 +397,16 @@
   z-index: 1;
 }
 
+footer {
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: center;
+}
+
 .createBy {
   flex: 0 0 auto;
   color: var(--tracepage-create-by-text-color);
   font-size: var(--font-size-sm);
-  text-align: center;
 }
 
 .createBy a {

src/pages/TracePage/TracePage.tsx

@@ -424,11 +424,21 @@ function TracePage() {
             )}
           </div>
 
-          <footer className={styles.createBy}>
-            Created by{" "}
-            <a href="https://tonstudio.io" target="_blank" rel="noreferrer">
-              TON Studio
-            </a>
+          <footer>
+            <span className={styles.createBy}>
+              Created by{" "}
+              <a href="https://tonstudio.io" target="_blank" rel="noreferrer">
+                TON Studio
+              </a>
+              {" and "}
+              <a href="https://t.me/toncore" target="_blank" rel="noreferrer">
+                TON Core
+              </a>
+              , powered by{" "}
+              <a href="https://toncenter.com/" target="_blank" rel="noreferrer">
+                TON Center
+              </a>
+            </span>
           </footer>
         </main>
       )}

yarn.lock

@@ -7378,16 +7378,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"txtracer-core@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "txtracer-core@npm:0.1.1"
+"txtracer-core@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "txtracer-core@npm:0.2.0"
   dependencies:
     "@ton-community/func-js": "npm:^0.10.0"
     "@ton/core": "npm:^0.61.0"
     "@ton/sandbox": "npm:^0.36.0"
     "@ton/ton": "npm:^15.3.1"
     axios: "npm:^1.6.7"
-  checksum: 10c0/4e2510dd3ffc411d908cef98e8fa62841ac0319fcc10a272e221458f4a86e17a62f9fe7aadef6fbc186393f56f354d10c896777f94ccab37ce40f7eb2d9ab458
+  checksum: 10c0/b8ac8b55135fb613ffa90f196736116b3359850ac4b0faea1d291dcb20d21fee2063933fb957fc346fa908bf5587cfdfb415a73aff24bf52f556a1e1cee3ae30
   languageName: node
   linkType: hard
 
@@ -7442,7 +7442,7 @@ __metadata:
     rollup-plugin-visualizer: "npm:^6.0.3"
     ton-assembly: "npm:0.2.4"
     ts-node: "npm:^10.9.1"
-    txtracer-core: "npm:^0.1.1"
+    txtracer-core: "npm:^0.2.0"
     typescript: "npm:~5.8.3"
     typescript-eslint: "npm:^8.30.1"
     vite: "npm:^6.3.5"