Implement the webhook-ui app

[zzuziak]

Fixes #1

Background

Thus far the webhooks subscriptions were added and removed manually by the team. This interface will allow users to manage their subscriptions themselves 🎉

Repo built on the foundation of sx-ui, that's why it looks nice ❤️

Related PRs

• snapshot-webhook
• snapshot.js

Assumptions

• User can add multiple subs for one space - by using different urls
• User can have a sub for all spaces and individual ones at the same time
• ⚠️ [NOT IMPLEMENTED] Subscriptions should be only showed to the actual user (this needs further updates, currently the endpoint exposes subscriptions without verification)
• this PR doesn't take into account GnosisSafe

Infrastructure & Handoff (changes)

For better readability and review, I sketched the infrastructure:

And also prepared a hand off which is basically a todo list per scope, might help with review the PR 🙏

Handoff

As a user I can login and see my subscriptions

• webhook-ui
  • display Connect button if user is not connected
  • use existing useWeb3 to connect
  • when user is connected, fetch their subscriptions
  • display list of subscriptions
• snapshot-webhook
  • add GET endpoint for /subscriptions/:owner
  • add a getOwnersSubscriptions function to fetch all subs where owner = owner AND active = 1

As a user I can add a subscription or subscribe to all

• webhook-ui
  • add a button Add a subscription
  • create SubscriptionModal with form: space and url
    • space list should have an option to select all / add a checkbox to select all which will disable list of spaces
    • add All spaces to the spaces list - which will create sub for all spaces
  • handleSubmit should trigger a signature via useClient composable
  • create client.ts and clientEIP712.ts helpers to use *snapshot.js* clients
  • wait for response, if successful reload the subscriptions
• snapshot.js
  • add a new function webhook in the client
  • add a new type Webhook:
    • from
    • url
    • space
    • active
    • timestamp
  • if the message is Webhook send an API call to ***************snapshot-webhook instead of hub
• snapshot-webhook
  • add a new endpoint /subscriptions
  • create new function to verify signature
  • add a new function to create a subscription
  • update sendEventToWebhookSubscribers
    • if the space param is a * send events from all spaces
    • if the space param is an id - send events from that space only

As a user I can remove a subscription

• webhook-ui
  • add a 🗑️ for all subscriptions
  • create RemoveSubscriptionModal with confirmation and form incl subscription id
  • handleSubmit should trigger a signature via useClient composable
  • wait for response, if successful reload the subscriptions
• snapshot.js
  • add a new function removeWebhook in the client
  • add a new type RemoveWebhook:
    • from
    • id
  • if the message is RemoveWebhook send an API call to ***************snapshot-webhook instead of hub
• snapshot-webhook
  • add a new endpoint /subscriptions/:id
  • verify signature
  • add a new function to deactivate a subscription
    • set active = 0 where id = :id

Screenshots & recordings

Welcome view

Subscriptions view

User flow

Remaining TODOS

• authenticate user before displaying all subscriptions
• add a search input for adding a subscription to find a space easily
• add tests - didn't have time to add any
• nice to have: edit a subscription