Optimistic UI
Reusing solidity logic
Problem
I have solidity logic I need to replicate on the frontend
Solution
Use Tevm to execute solidity.
Explanation
It’s extremely common to need to replicate contract logic on the frontend. Perhaps you need to hash some data the same way a contract does. This can both be hard to maintain and bug-prone.
With Tevm you can execute any Solidity bytecode in the EVM. This is another example of bring your own view function
, a common way of using Tevm where you write your own shadow view functions to execute on the EVM.
Example
Let’s say we have a library function
We could replicate this in JavaScript
But for more complicated solidity logic this can be hard to maintain and needs to be kept in sync with the solidity logic. What we could do instead is directly run the solidity.
Warning this example is using an unreleased Tevm feature, inline solidity, that will be released soon. See this thread for how to do this today.
Comparison to alternatives
- Deploying the contract that exposes a view method would work here. This is worse in two ways. 1. Extra latency from needing to do a network request rather than executing the hashing locally and 2. A new contract dependency added to your project.
- Rewriting in JavaScript is harder to maintain and bug prone. It can be worth it if you want to optimize peformance as much as possible for a commonly called function. Even if you do write in JS, you may want to consider using Tevm in your unit tests to assert your JS is in sync with the solidity.
- We could use viem with the new code property and it would work. However it would suffer from network request latency compared to executing the evm locally.