前端web3入门脚本五：decode input data

一、前言

作为一个前端，在调用合约调试的时候，在区块浏览器里拿到一串 hex 格式的 input data，我们应该怎么decode呢？

二、举例

解码交易需要拥有对应合约的 abi 以及 input data
下面举例介绍怎么获得这两个信息：
参考交易：浏览器交易地址
在这里插入图片描述

从这里我们可以拿到 Input Data （目前etherscan是已经支持默认input data解码了的，这里用etherscan的一条交易举例，毕竟不是所有公链的区块浏览器都支持解码功能，作为开发者我们需要掌握主动解码的能力。
在这个页面我们能看到这笔交易调用的是 pancake V3的合约

点进去能够获得对应 V3 合约的 abi。

三、脚本解释

const InputDataDecoder = require('ethereum-input-data-decoder');
const v3Router = require('../abis/pancakeRouterV3.json')
const decoder = new InputDataDecoder(v3Router);

// tx url: https://etherscan.io/tx/0x4169ddf78be52aade30a6043feac7d6a3b00bddad64e80d27e660761cec7d0ef
// pancake v3 router: https://etherscan.io/address/0x13f4ea83d0bd40e75c8222255bc855a974568dd4#code
const data = '0x5ae401dc00000000000000000000000000000000000000000000000000000000645088eb00000000000000000000000000000000000000000000000000000000000000400000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000000e404e45aaf000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc20000000000000000000000006982508145454ce325ddbe47a25d4ec3d231193300000000000000000000000000000000000000000000000000000000000009c4000000000000000000000000307e3fdf958e61e593ffd53efa68bd798477c7bd0000000000000000000000000000000000000000000000000058d15e176280000000000000000000000000000000000000000000001d4ebb90dc9195172b5342000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
const result = decoder.decodeData(data);
console.log(result);

const multicallData = '0x04e45aaf000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc20000000000000000000000006982508145454ce325ddbe47a25d4ec3d231193300000000000000000000000000000000000000000000000000000000000009c4000000000000000000000000307e3fdf958e61e593ffd53efa68bd798477c7bd0000000000000000000000000000000000000000000000000058d15e176280000000000000000000000000000000000000000000001d4ebb90dc9195172b53420000000000000000000000000000000000000000000000000000000000000000'
const resultMulticallData = decoder.decodeData(multicallData);
console.log(resultMulticallData);