Invalid Type error with signPayment function

Support
1

I try to signing off network a hash to make a payment channel.

I use the next function:

     function signPayment(recipient, amount, nonce, contractAddress) {
              var hash = "0x" + abi.soliditySHA3(
                  ["address", "uint256", "uint256", "address"],
                  [recipient, amount, nonce, contractAddress]
              ).toString("hex");

              //console.log('el Hash ', hash);
          
             // web3.eth.personal.sign(hash, web3.eth.defaultAccount, console.log);
              
          }

But I get the following error:

bytes.ts:92 Uncaught Error: invalid type

my react form is this:

 <form className="p-4 p-md-5 border rounded-3 bg-light">
              <div className="form-floating mb-3">
                  <input value={contractAddress} onChange={e => setContractAddress(e.target.value)} type="text" className="form-control" id="contractAddress"/>
                  <label for="contractAddress">Contrato</label>
                </div>
                <div className="form-floating mb-3">
                  <input value={recipient} onChange={e => setRecipient(e.target.value)} type="text" className="form-control" id="recipient" />
                  <label for="nonce">Beneficiario</label>
                </div>
                <div className="form-floating mb-3">
                  <input value={nonce} onChange={e => setNonce(e.target.value)} type="number" className="form-control" id="nonce"/>
                  <label for="amount">Serie</label>
                </div>
                <div className="form-floating mb-3">
                  <input value={amount} onChange={e => setAmount(e.target.value)} type="number" className="form-control" id="amount"/>
                  <label for="floatingPassword">Cantidad</label>
                </div>

                <button id="btn-firma"  onClick={signPayment} className="w-100 btn btn-lg btn-primary" type="button">Firmar</button>
                <hr className="my-4"/>
                <small id="firmante" className="text-muted">...</small>
              </form>

I have done a console.log and I have verified that the variables arrive undefined. and the recipient variable with this strange object:

SyntheticBaseEvent {_reactName: "onClick", _targetInst: null, type: "click", nativeEvent: PointerEvent, target: button#btn-firma.w-100.btn.btn-lg.btn-primary, …}
2

Solved. the anonymous function was missing in the onclick with the appropriate parameters.

 <button id="btn-firma"  onClick={() => signPayment(recipient, amount, nonce, contractAddress)} className="w-100 btn btn-lg btn-primary" type="button">Firmar</button>

However, now it triggers another error that I do not understand very well:
Assertion Failed

Any idea?

3

The function suggested by the solidity api does not work for me. I am testing with the web3 library. However I get different results using the same data. That is, the hash is different if I use this:

 var hash = web3.utils.soliditySha3(recipient, amount, nonce, contractAddress);
                console.log('hash ', hash);

with the function that I have in remix for the same process:

    function getMessageHash(
        address _to, uint _amount, uint _nonce, address _contract
    )
        public pure returns (bytes32)
    {
        return keccak256(abi.encodePacked(_to, _amount, _nonce, _contract));
    }

I get different hashes

Any idea?