Feat/arbitrary message signing structured data/i2387

[beguene]

Try out this version of the Hiro Wallet - download extension builds.

Add support for signing structured data (ClarityValue)

The web wallet receives the ClarityValue serialized in hex format which is then deserialized to display in the UI in a human readable format. The serialized format is finallly hashed and signed when the user clicks 'Sign'

cc/ @kyranjamie @fbwoolf @beguene @He1DAr

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
stacks-wallet-web	✅ Ready (Inspect)	Visit Preview	May 16, 2022 at 4:07PM (UTC)

[landitus]

@beguene Is there a way to see these screens with the test app?

[beguene]

@landitus Were you able to test with https://stacks-wallet-jznmyg9k2-blockstack.vercel.app/ ?

[landitus]

@landitus Were you able to test with https://stacks-wallet-jznmyg9k2-blockstack.vercel.app/ ?

Yes, thank you. Be sure to check the Figma for the text formatting. It doesn't need to be a <pre> tag as the font should be our normal one. HTML wise it could be better as a list <ul><li> with definition lists <dl><dd> for title and description). In the design, the definition is lighter (gray) while the description is in the regular text color (black).

Also, beware there's an extra space at the top of the text content which I'm not sure where it comes from.

[timstackblock]

@beguene I fixed this test on dev if you rebase it you should be ok

[beguene]

Thanks a lot @timstackblock I will check it out.

[beguene]

@landitus I updated the UI with dl dd markup. Let me know if it's fine.

[landitus]

@beguene It's looking better now, but it's still difficult to read when there are nested elements. I just peaked at the code and with flexbox it will be quite hard to align the elements correctly. I tested a hierarchy and styling to be as simple as possible in a CodeSandbox, and maybe it can help you this PR: https://codesandbox.io/s/pensive-bas-utyx9m?file=/index.html

Note that this code is very rough, so measures and color values are approximate to illustrate the path I would go for

[landitus]

Added me comments above ☝️

[beguene]

Thanks a lot @landitus, I will try your solution.

[kyranjamie]

@landitus's comments yet to be addressed, but merging for now to release feature

feature needs to be released