How to extract only named values in the Result object?

[novaknole]

After I do the decoding, let's say decodeFunctionData or any other decoding, The result seems to be something like this:

'0':'0x1000',
'1':'0x1010',
'config':'0x1000',
'payload':'0x1010'

As shown, 0 key data corresponds to config and 1 corresponds to payload.

Is there any way that decoding doesn't add numbered keys such as 0, 1 and so on ?

Thank you.

[zemse]

I once did a hacky way for the same. Copy-pasting it here

function removeNumericKeysFromStruct(inputStruct: ethers.utils.Result) {
  const returnObj: { [key: string]: any } = {};
  Object.entries(inputStruct)
    .filter((entry, i) => {
      if (entry[0] === 'length') return false;
      if (entry[0] === String(i)) return false;
      return true;
    })
    .forEach((entry) => (returnObj[entry[0]] = entry[1]));
  return returnObj;
}

[zemse]

Oh I just recalled that there's a catch to it. If you have a event or function with a unnamed output parameter e.g.:

event Hello(bytes2 config, bytes2, bytes2 payload);
function hello() public view returns (bytes2 config, bytes2, bytes2 payload);

It will generate:

{
'0':'0x1000',
'1':'0x1010',
'2':'0x1010',
'config':'0x1000',
'payload':'0x1010'
}

So removing the numeric keys would cause you to lose that parameter. So, that needs an approach that involves checking out names of outputs in the abi interface and if there is a unnamed output parameter then name it like arg0, arg1, arg2... As an example, I did this for a hardhat plugin that prints events in the console. The relevant code is here.

@ricmoo I'd like to ask if ethers js should return a default name like arg${i} or arg_${i} for unnamed parameters.

[ricmoo]

Thanks @zemse.

There are a few things to note here. First, the result object is actually an Array. If you use Array.isArray(result) the answer is true, so removing the numbered keys from that object directly is likely to do very strange things and probably not what you want.

All values are always available as their positional arguments. Only if an argument is named is it available as a named argument. So, it is in general far less safe to rely on named values since they are optional.

My first question would be why you want to remove the Array indexed elements, there may be another way to do what you are trying. But if you genuinely want to pull these out, like @zemse pointed out, you would need to decide what to do with unnamed properties. It actually quite hard to come up with a generic solution that doesn't just end up in a cascade of escapes. For example, what if there was an arg called arg1 (e.g. foo() returns (uint arg1, bool)); things might get clobbered. :)

If this is something you need to do, you will likely need to turn to the ABI to extract these out, using a reduce which allows you to do with the unnamed properties as you please:

const data = '0x00000000000000000000000000000000000000000000000000000000000004d20000000000000000000000000000000000000000000000000000000000000001'
const iface = new ethers.utils.Interface([
    "function foo() view returns (uint256 value, bool)"
])
const result = iface.decodeFunctionResult("foo", data);

// This has your numbered elements 0 and 1
console.log(result);
/*
   [
     BigNumber { _hex: '0x04d2', _isBigNumber: true },
     true,
     value: BigNumber { _hex: '0x04d2', _isBigNumber: true }
   ]
*/

// Get the ABI fragment which knows the named elements...
const fragment = iface.getFunction("foo");

// Reduce the elements out
const onlyNamedResult = result.reduce((accum, value, index) => {
    let name = fragment.outputs[index].name;
    if (name == null) {
        // Whatever you want to do here? Let's use zemse's idea
        name = "arg" + String(index);
    }
    accum[name] = value;
    return accum;
}, { });

console.log(onlyNamedResult);
/*
   {
     value: BigNumber { _hex: '0x04d2', _isBigNumber: true },
     arg1: true
   }
*/

Does that help? At least help explain why there are positional elements in the first place? :)

[ricmoo]

(also, moving to discussions ;))

[novaknole]

@ricmoo @zemse

Thanks a lot to both of you for the great answers. Really appreciate it. Let me quickly explain why i need it.

So, in my front-end app, I get the calldata which is encoded. I also got the ABI ready.. I try to decode it now. The idea is that I only got the ABI of the whole contract which also includes the abi for the calldata for sure.

Now after decoding, I want to show the decoded version on the website, because I don't know exactly which key, values it has, I was thinking just doing looping through it, and showing key values on the front-end website. Because 0, 1 and so on exist too, it means that I have to be checking this and not showing that, otherwise I would have duplicate results.

Let me know if that makes sense otherwise I will try to explain better

[novaknole]

@ricmoo @zemse The idea is that people create the array of calldatas such as this..

const actions = [
   {
      to: 'contract1Address',
      value: 0,
      calldata: '0x+functionSignature + encoded parameters'
   },
  {
      to: 'contract2Address',
      value: 0,
      calldata: '0x+functionSignature + encoded parameters'
   }
]

So the Actions array could contain lots of members. Also each calldata could be anything(encoded structs, encoded numbers or both or arrays, e.t.c)

In my front-end app, Actions array is what i get and my mission is to decode everything so that I show the users something like this:

// Hey user...

// Action #1
to: 0x123123813123
value: 0
data: {
     "num1": "202",
     "num2" : "404"
}

// Action #2
to: 0x123123813123
value: 0
data: {
     "num1": "202",
     "str" : {
          x1: "2020"
     }
}

In order to do this, what I do is I fetch the ABI from etherscan API for each action.to address. and then do the following.

The below code gets called for each action.

const decodedData = contract.interface.decodeFunctionData(sigHash, calldata)
const functionABI = contract.interface.getFunction(sigHash)

// Reduce the elements out
const onlyNamedResult = decodedData.reduce((accum, value, index) => {
  const input = functionABI.inputs[index];
  
  decodeInput(input, value, accum)

  return accum;
}, { });


function decodeInput(input, value, accum) {
  if(input.type === 'tuple') {
    accum[input.name] = {};
    input.components.forEach((component, index) => {
      if(component.type === 'tuple') {
        accum[input.name][component.name] = {};
        decodeInput(component, value[index], accum[input.name])
      }
      else{
        accum[input.name][component.name] = decodeValue(value[index])
      }
    })
  }else{
    accum[input.name] = decodeValue(value)
  }
}

function decodeValue(value) {
  // check if value is bigNumber or number
  if(typeof value === 'number' || value._isBigNumber) return value.toString()
  if(Array.isArray(value)) {
    value = value.map(item => {
      if(typeof item === 'number' || item._isBigNumber) return item.toString()
      // check if value is hex and can be converted to string
      try {
        return utils.toUtf8String(value)
      }catch(err) {}
      
      return item;
    })
  }

  // check if value is hex and can be converted to string
  try {
    return utils.toUtf8String(value)
  }catch(err) {}

  return value;
}

I think It seems to be decoding arrays, structs and things like that successfully. For sure, I might have missed some part of decoding.

I'd appreciate if you could let me know what you think of this idea and if there's better way of doing it.