feat: use `<InputBytes/>` for `[u8, n]` type

[peetzweg]

makes use of <InputBytes/> for VecFixed with Sub u8, which is usually easier to input encoded has hex. Closes #416.

Using the plain Input component to recreate some behavior of the InputHex one. However doing the checking hex step in the validation function. Therefore allowing not hex characters, but allows for empty value and less hassle of pasting a copied hex string to this input field.

Tested with String, Hash and Vec<u8> types if there is some overlap regarding input rendering. These inputs are not touched by this PR.

https://github.com/paritytech/contracts-ui/assets/839848/4e715f5e-0411-411c-90d6-fd4cbfbfca24

Contract input-types:

https://filebin.net/41e8q8cyl9yvf1g9

[netlify[bot]]

✅ Deploy Preview for contracts-ui ready!

Name	Link
🔨 Latest commit	f16d9a1a8389d2a07ccca3ebe6e11b5ef9cde61f
🔍 Latest deploy log	https://app.netlify.com/sites/contracts-ui/deploys/64a6a5b88178c10008213952
😎 Deploy Preview	https://deploy-preview-496--contracts-ui.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[statictype]

the input doesn't allow users to type unwanted characters, if we allow '0x' in there at the beginning, validation gets trickier. if you want to write this regex be my guest :)

[cypress[bot]]

Passing run #149 ↗︎

0	61	0	0	0
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

use vanilla `Input` to move the check for hex into the validation instead of pre...
Project: Contracts UI	Commit: f16d9a1a83
Status: Passed	Duration: 04:22 💡
Started: Jul 6, 2023 11:33 AM	Ended: Jul 6, 2023 11:37 AM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[peetzweg]

seems like you modified this component to mimic the behaviour of InputHash. just wondering why not use that directly?

The InputHash turns the resulting value into a H256, but we this input should turn it into a Uint8Array. So this is actually what the previously unused InputBytes does. Just added a length prop to define how many bytes hex encoded to expect.

https://github.com/paritytech/contracts-ui/blob/b526ff13cad048f6954063b3e2f130d9b9283121/src/ui/components/form/InputHash.tsx#L33-L34

https://github.com/paritytech/contracts-ui/blob/b526ff13cad048f6954063b3e2f130d9b9283121/src/ui/components/form/InputBytes.tsx#L41

[peetzweg]

How does the actual form for submitting a message actually determine if inputs are valid or not as the validation is done by the child components. 🤔

https://github.com/paritytech/contracts-ui/blob/f16d9a1a8389d2a07ccca3ebe6e11b5ef9cde61f/src/ui/components/form/InputBytes.tsx#L46-L53

[statictype]

LGTM!

@Maar-io can you please test the deploy preview to make sure it's working for your use cases? https://deploy-preview-496--contracts-ui.netlify.app/

[peetzweg]

Just pinging @Maar-io again. Can you confirm this is solving your issue #416 ?

https://github.com/paritytech/contracts-ui/pull/496#issuecomment-1629121611

[Maar-io]

I can confirm it works as expected. Great work team and thank you!!!