#251 Add ABI encoding for raw input form #256
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Hi @nevendyulgerov,
There is a problem when ABI encoding uses a JSON_ABI format. I notice in the index.ts#encodeFunctionParamsDebounced() is doing the encoding, but the underneath function assumes it is an ABI parameter (i.e. on-the-fly definition), but that is not what we want for JSON_ABI because it will not include the 4-bytes selector that is the function signature for the JSON_ABI format; Therefore, both the DApp backend will fail to parse its payload and also CartesiScan will fail to do the same using the JSON_ABI specification saved.
I'll use the onChess ABI as an example:
network deployed: 84532 (base-sepolia)
Address: 0xc93796ff6ed6b8d15d68ecb793df221ecf042774
Getting the input index 13, we have an input encoded by the function move that expects two arguments (address game, string move)
Suppose I follow the same steps through the form. I expect the same encoded value to be generated as the rawInput that goes to the InputBox. But it generates a different output.
Expected: 0x17799d270000000000000000000000002189f5ec6516583b6a0cddf47c712355316d0ff6000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000026436000000000000000000000000000000000000000000000000000000000000
Generated: 0x0000000000000000000000002189f5ec6516583b6a0cddf47c712355316d0ff6000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000026436000000000000000000000000000000000000000000000000000000000000
It is just the function that needs to change based on the ABI definition chosen (ABI Parameters or JSON-ABI). For the latter the 4-bytes selector needs to be included because it tells the decoding function what ABI's function to pick.
I added information about the onChess app + the ABI so you can play around. Reach out if you have questions.
onChess ABI
function create(uint256 bet, string timeControl, uint32 minRating, uint32 maxRating) returns (address)
function cancel()
function move(address game, string move)
function resign(address game)
function claim(address game)
function withdraw(uint256 amount)
function withdrawRake()
function setRakeDivider(uint32 rake)
function transferOwnership(address newOwner)
function upgrade(address dapp)[
{
"name": "create",
"type": "function",
"stateMutability": "nonpayable",
"inputs": [
{
"type": "uint256",
"name": "bet"
},
{
"type": "string",
"name": "timeControl"
},
{
"type": "uint32",
"name": "minRating"
},
{
"type": "uint32",
"name": "maxRating"
}
],
"outputs": [
{
"type": "address"
}
]
},
{
"name": "cancel",
"type": "function",
"stateMutability": "nonpayable",
"inputs": [],
"outputs": []
},
{
"name": "move",
"type": "function",
"stateMutability": "nonpayable",
"inputs": [
{
"type": "address",
"name": "game"
},
{
"type": "string",
"name": "move"
}
],
"outputs": []
},
{
"name": "resign",
"type": "function",
"stateMutability": "nonpayable",
"inputs": [
{
"type": "address",
"name": "game"
}
],
"outputs": []
},
{
"name": "claim",
"type": "function",
"stateMutability": "nonpayable",
"inputs": [
{
"type": "address",
"name": "game"
}
],
"outputs": []
},
{
"name": "withdraw",
"type": "function",
"stateMutability": "nonpayable",
"inputs": [
{
"type": "uint256",
"name": "amount"
}
],
"outputs": []
},
{
"name": "withdrawRake",
"type": "function",
"stateMutability": "nonpayable",
"inputs": [],
"outputs": []
},
{
"name": "setRakeDivider",
"type": "function",
"stateMutability": "nonpayable",
"inputs": [
{
"type": "uint32",
"name": "rake"
}
],
"outputs": []
},
{
"name": "transferOwnership",
"type": "function",
"stateMutability": "nonpayable",
"inputs": [
{
"type": "address",
"name": "newOwner"
}
],
"outputs": []
},
{
"name": "upgrade",
"type": "function",
"stateMutability": "nonpayable",
"inputs": [
{
"type": "address",
"name": "dapp"
}
],
"outputs": []
}
]
| FormValues, | ||
| FormTransformedValues, | ||
| } from "./types"; | ||
| import { prepareSignatures } from "web/src/components/specification/utils"; |
There was a problem hiding this comment.
This is a boundary leak in the sense that packages know about apps. A change in the apps/web in this function would have an unexpected effect on the packages/ui. That also creates an odd "circular" dependency: web depends on pkg/ui, but pkg/ui also depends on web.
I think it would be sensible to copy the prepareSignature to this utils file and use it here and also in the validations.ts (I added a comment there.)
Do you agree @nevendyulgerov?
There was a problem hiding this comment.
Good catch, @brunomenezes , I refactored it.
| import { isAddress, isHex, parseAbi, parseAbiParameters } from "viem"; | ||
| import { FormValues } from "./types"; | ||
| import { isBlank } from "ramda-adjunct"; | ||
| import { prepareSignatures } from "web/src/components/specification/utils"; |
There was a problem hiding this comment.
highlighted reasons here
brunomenezes
deleted the
feature/251-add-abi-encoding-for-raw-input-form
branch
I rebranded the form and reorganised related files for it under
packages/ui/src/GenericInputForm.Summary of the changes:
Generic InputABI to Hexmode and slightly changed labels for the other modes to resemble those fromcartesi-cliABI to Hexmode as follows:ABI methodselect for choosing whether to use existing specifications or create a new oneJSON ABIandABI Parameters:JSON ABIis selected:ABI Parametersis selected:encodeAbiParametersfromviem.cartesi-cliand more specifically https://github.com/cartesi/cli/blob/main/apps/cli/src/commands/send/generic.ts