anoma / namada-interface

Apache License 2.0
77 stars 101 forks source link

Extension: Display Tx details in Approval window for signing #835

Closed jurevans closed 2 months ago

jurevans commented 4 months ago

We need to re-introduce details about the Tx being signed in the Approval views.

The route could simply follow this structure:

/approve-sign-tx/{accountType}/{txType}/{msgId}

Where accountType determines whether we use Extension key store, or Ledger HW Wallet, and txType tells us how to deserialize & display the Tx, and msgId gives us the key for the PendingTx

See Figma designs for Tx approvals: https://www.figma.com/design/NFyHbLZXBSl3aUsMxtffvV/Namada-End-User-Interface-V1.0-%2F-Phase-1%3A-Block-Party?node-id=4285-26253&t=k9h95cJpkjsPAh8e-0

Sign Arbitrary

We should handle "details" the same way when signing arbitrary data as well. We query the details for signArbitrary calls, which will always return a string. Then, attempt to parse the string as JSON, and format, something like:

try {
  const json = JSON.parse(data);
  const formatted = JSON.stringify(data, null, 2);
  setData(formatted);
} catch (e) {
  setData(data); // unchanged
}

And display in a <pre></pre> per the designs

Figma: https://www.figma.com/design/NFyHbLZXBSl3aUsMxtffvV/Namada-End-User-Interface-V1.0-%2F-Phase-1%3A-Block-Party?node-id=3968-2&t=da4IZ3LoUqFISuyV-0#812357271

ChrisHoltDesign commented 4 months ago

I've updated the UI slightly removing the Fee and memo from that design specific design

If we can get is as close to this as possible then great :)

Might need a horizontal scroll on each of the list items if we have to display a full address + a large amount or denomination of NAM