Add hybrid custody support for emulator

[bartolomej]

I can see that the Hybrid custody feature is disabled for the emulator network:

https://github.com/33-Labs/flowview/blob/1c739751c3637011872100867b74b697679b052a/components/common/Siderbar.js#L64-L69

I believe that's because hybrid custody contracts aren't available (deployed) on the emulator network by default, so the scripts won't work.

I wonder if we could enable emulator support, but just make sure to handle errors appropriately (I saw that errors are currently just ignored), to let the users know why the hybrid custody doesn't work (in case they don't have that contract deployed).

Context:

We are thinking of integrating flow-view to Flowser app (likely by embedding a deployed or locally hosted version in an iframe window) to reuse existing hybrid custody features already supported in flow-view. I think the basic support would already work if we enabled hybrid custody for the emulator.

There is still a question of how to make it easy for users to setup hybrid custody contracts locally (I just spend quite some time doing that myself, so I don't think it's easy to do that now), but that can be solved separately.

[bartolomej]

Thought I'd paste some extra notes around exposing HybridCustody on the emulator:

• Other developers are experiencing the same issues, so this is definitely a valid problem: https://discord.com/channels/613813861610684416/1123314820763111465/1164943141699342527
• How we could make it easy to set up HybridCustody contracts:
  • update Flow CLI to deploy those contracts using the --contracts flag
  • use Flowty's tool for managing contracts: https://github.com/Flowtyio/flow-contracts (requires a fix: https://github.com/Flowtyio/flow-contracts/issues/20 + I don't think this is a long-term solution)
  • ideally, there would be a Cadence package manager tool that would take care of that (also discussed in https://github.com/onflow/flow-cli/issues/929)

But I think the easiest and the most preferred way to do that now is to just use a hybrid custody scaffold: https://github.com/onflow/hybrid-custody-scaffold. Of course, this is mostly a valid solution when starting a new project.

[LanfordCai]

@bartolomej How about adding some buttons to the Flowview page that allow users to 'click to deploy'? For instance, there could be a 'HybridCustody' button. When a user clicks it, HybridCustody would be deployed to the emulator service account. In terms of dependencies, any that are omitted would also be deployed to the service account.

[bartolomej]

@LanfordCai That would also work but seems like it could require a bit more work to get implemented.

I think most importantly we should probably handle the errors gracefully first (e.g. display them to the user) and then follow-up with an improvement that offers a fix for the received errors, as the one you mentioned.

The one slight issue with "deploy HybridCustody" action is that it won't update the flow.json config in the user's project folder, which is not ideal for local development (e.g. transactions with new import syntax won't work).

I wonder if we should either:

• let the user resolve the error on their own when seeing the error message (or implement that in another local development tool such as Flow CLI or Flowser)
• try to fix the error within flowview (e.g. with a deploy HybridCustody action button) and assume users will update the flow.json on their own or display a help message

[LanfordCai]

@bartolomej I have updated https://emulator.flowview.app. Could you please check the hc pages?

[bartolomej]

@LanfordCai I can see the pages are now visible for the emulator mode and you can configure the hybrid custody contract address. That's great, thanks for that!

Follow-up things that could be nice to have:

• the ability to edit existing hybrid custody address (afaik once you set it, you can't edit it from the UI now)
• API for updating the hybrid custody address
  • this will be useful if we integrate flowview in Flowser. Then we can automatically detect where the HybridCustody is deployed and update flowview settings accordingly
  • This could be achieved by allowing an optional URL parameter to specify this setting or using iFrame postMessage to execute configuration logic from the parent window (if flowview is embedded in iframe)
  • This is probably only relevant for our use case, for now, so I'll handle the implementation for this on our end (e.g. in a forked version) and make a PR if our solution could be useful in general

[LanfordCai]

@bartolomej Thank you for your feedback! Now you can edit the contract address by clicking the cog button at the top-right of the page! As for the API, now there is no API for flowview and it would be great to know you are going to implement it! Thank you!