Add ability to toggle between raw and decoded instructions in proposal view

[jshiohaha]

Description

Right now, the UI only shows raw proposal instructions. This is a change that will allow users to see both the decoded and raw versions of instructions. For proposals that have passed, we will also link to the finalize proposal transaction.

The current implementation is optimized for 1 instruction per proposal but can be easily extended to multiple instructions per proposal.

How it works

For anchor programs, we can simply use the BorshInstructionCoder that @coral-xyz/anchor exposes. Non-anchor programs do not use discriminators to identify instructions, so they are not compatible. Instead, they use an enum at the beginning of the instruction data. There is a custom coder for native programs with only a decode function to help us decode native and SPL programs.

We still use IDLs for the native and SPL programs when instantiating the custom coder. This is possible because this package: https://github.com/acheroncrypto/native-to-anchor. You can also find the IDL in the @coral-xyz/anchor repository. For example, here is an IDL for SPL Token: https://github.com/coral-xyz/anchor/blob/master/ts/packages/spl-token/idl.json

Once we have the decoded instruction data, we still have to render it. There are 3 options outlined below with screenshots. I only added custom display logic for the memo program and some token program operations (aka the most common), but it's possible to add more as needed. Without custom display logic, we will simply enumerate the accounts and data args similar to explorers today.

Display options

Current display (raw)

This is also the view users will see if we cannot find an IDL to decode a instruction:

Custom decoded displays (token, memo programs)

This is what users will see if we have an IDL to decode an instruction and custom JSX to render the decoded data.

Default decoded display.

This is what users will see if we have an IDL to decode an instruction but no custom JSX to render the decoded data. Similar to explorers, we just enumerate accounts and data args:

Run this branch

There is no special logic to get this branch up and running. Simply follow these steps:

• pull branch
• run npm i
• run npm run dev
• visit http://localhost:3000 in your browser of choice

Testing

• Manual functional testing via human clicks
• Verifying that npm run build runs successfully

[R-K-H]

I'll review locally before end of day today.

[jshiohaha]

I added react-query to the places you pointed out and verified that each is only called once-per-page load with some console.log statements. We are no longer fetching mint + metadata every time you switch between decoded and raw instructions 👍

I also tried to use react-query to cache data that wouldn't change across page loads (e.g. finalize proposal transaction signature), but I couldn't figure out how to make that work. The data was refetched every page load. But, I'm also a react-query noob, so I might be missing something totally obvious.

[jshiohaha]

woohoo, thanks so much to you both for the feedback and review! 🙂