[Arbitrary Txs] Fix array encoding issue

[jakubcolony]

Description

This PR fixes an issue with array encoding when creating arbitrary transactions. The cause of the issue was passing a string representation of an array (e.g. "[]") instead of a "first-class" JS array.

It also improves the decoding of array arguments when showing a completed action.

Testing

To ensure thorough coverage, we'll deploy a test contract that has a function with nearly all possible argument types.

Deploying test contract

1. Ensure your dev env is fully running.
2. Create a new file called TestContract.sol in your CDapp root directory with the following contents:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract TestContract {
    function testFunction(
        uint256 uint256Arg,
        uint256[] memory uint256ArrayArg,
        uint256[][] memory uint256NestedArrayArg,
        bool boolArg,
        bool[] memory boolArrayArg,
        address addressArg,
        address[] memory addressArrayArg,
        bytes memory bytesArg,
        bytes[] memory bytesArrayArg,
        string memory stringArg,
        string[] memory stringArrayArg
    ) public {}
}

3. Run the following in your terminal to copy the contract over to the network container and compile it:

docker cp TestContract.sol network:/colonyCDappBackend/colonyNetwork/contracts && docker exec -it -w /colonyCDappBackend/colonyNetwork network npx hardhat compile

4. Start the hardhat console with npm run hardhat, then run the following code line-by-line:

cf = await ethers.getContractFactory('TestContract')
c = await cf.deploy()
c.address

The last expression will print the address of the newly deployed contract. Copy it for later use.

Testing arbitrary transactions

1. Create new arbitrary transaction action.
2. In the modal, paste the deployed contract address and the following JSON ABI:

[
  {
    "inputs": [
      {
        "internalType": "uint256",
        "name": "uint256Arg",
        "type": "uint256"
      },
      {
        "internalType": "uint256[]",
        "name": "uint256ArrayArg",
        "type": "uint256[]"
      },
      {
        "internalType": "uint256[][]",
        "name": "uint256NestedArrayArg",
        "type": "uint256[][]"
      },
      {
        "internalType": "bool",
        "name": "boolArg",
        "type": "bool"
      },
      {
        "internalType": "bool[]",
        "name": "boolArrayArg",
        "type": "bool[]"
      },
      {
        "internalType": "address",
        "name": "addressArg",
        "type": "address"
      },
      {
        "internalType": "address[]",
        "name": "addressArrayArg",
        "type": "address[]"
      },
      {
        "internalType": "bytes",
        "name": "bytesArg",
        "type": "bytes"
      },
      {
        "internalType": "bytes[]",
        "name": "bytesArrayArg",
        "type": "bytes[]"
      },
      {
        "internalType": "string",
        "name": "stringArg",
        "type": "string"
      },
      {
        "internalType": "string[]",
        "name": "stringArrayArg",
        "type": "string[]"
      }
    ],
    "name": "testFunction",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
  }
]

3. Select testFunction from the dropdown, and fill the fields with correct values according to their type. For example:

• uint256Arg: 123456789
• uint256ArrayArg: [123, 456, 789]
• uint256NestedArrayArg: [[1, 2], [3, 4, 5]]
• boolArg: true
• boolArrayArg: [true, false, true]
• addressArg: 0x742d35Cc6634C0532925a3b844Bc454e4438f44e
• addressArrayArg: [0x742d35Cc6634C0532925a3b844Bc454e4438f44e, 0x5B38Da6a701c568545dCfcB03FcB875f56beddC4]
• bytesArg: 0xFF
• bytesArrayArg: [0xFF, 0xAA]
• stringArg: Hello World
• stringArrayArg: ["Hello", "World", "Blockchain"]

4. Submit the form. The transaction should go through and you should see the decoded arguments in the temporary completed action view.

5. Repeat the steps using reputation or multi-sig decision method (both use the same code).

Resolves #4124

[jakubcolony]

This is loosely based on Dapp implementation but has further improvements such as actually parsing nested arrays and handling potentially confusing strings containing commas and brackets (e.g. ["[", ","]).

[Nortsova]

Great work! Thanks for fixing this bug and testing every possible arg type 👏

Created a Custom transaction with all following arguments:

Successfully decoded:

Multi-sig works good too:

[Nortsova]

I would propose moving this to translation.

The base branch was changed.

[mmioana]

Amazing work @jakubcolony 🥇

Created a custom transaction via Permissions with the provided values

Created another custom transaction via Reputation

Really nice implementation for the getArrayFromString utils 👍

[Nortsova]

Reapproving after base branch changed ✅

[iamsamgibbs]

Great job with this and thanks for providing the test contract, super helpful! Nice implementation of getArrayFromString too.