Decode execution code

[chapati23]

Before

After

Description

I added an integration with the Celo Explorer GraphQL API to fetch contract names & abis on the Execution Code component to show users in more human-readable form what a proposal will actually do.

Unfortunately Apollo makes it a bit difficult to have more than 1 GraphQL endpoint so I needed to change the project set up a bit to allow querying different GraphQL endpoints.

Basically, there's a new context parameter apiName that can be passed to useQuery or useSuspenseQuery that can decided which GraphQL endpoint a query will be executed against. For example:

  const { data, error } = useQuery(GetContractsInfo, {
    variables: { addresses },
    context: { apiName: "celoExplorer" },
    skip: !addresses.length,
  });

How to test

1. Start a local server (or use the Vercel auto-generated URL after it's been deployed)
2. Navigate to a proposal details page (the one titled "Send 100 tokens to super devs" has real calldata)
3. See that the target and calldata have been decoded and are in human-readable form now
4. Review the code, specifically around the new GraphQL structure

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
governance-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 28, 2024 4:43pm

[tplocic20]

Looking good