Create Basic Maker/Taker UI

[tvolk131]

Overview

The UI should have two different sections where the user can act as a maker or a taker. Something like a bottom navigation or a drawer could work. We should use a UI component that can accommodate a third section for acting as an oracle in the future. However, the oracle section is being punted from the hackathon.

Maker Page

Should be able to do the following:

• View a list of all incoming contract offers from potential takers (of type OfferedContract)
• For any incoming contract offer, the user can select it to view it in detail. This should show what stage it is at using a linear stepper or something similar. The steps should be:
  1. Contract Offered (show Accept Offer and Reject Offer buttons)
  2. Contract Accepted
  3. Contract Signed
  4. Contract Published
  5. Contract Confirmed On-Chain (show Sync button which checks with the oracle for a signed event that can unlock the contract, which would move it to the next state)
  6. Contract Closing Published
  7. Contract Closing Confirmed On-Chain

Taker Page

Should be able to do the following:

• View a list of all outgoing contract offers (of type OfferedContract)
• For any outgoing contract offer, the user can select it to view it in detail. This should show what stage it is at using a linear stepper or something similar. The steps should be:
  1. Contract Offered (Competed by creating the offer, so should always be rendered as complete)
  2. Contract Accepted
  3. Contract Signed
  4. Contract Published
  5. Contract Confirmed On-Chain (show Sync button which checks with the oracle for a signed event that can unlock the contract, which would move it to the next state)
  6. Contract Closing Published
  7. Contract Closing Confirmed On-Chain
• Create and send an outgoing contract offer to a maker which should have the following fields configurable in the UI:
  • maker app nPub: string
  • bounty title (and/or any additional info we want to render in the UI): string
  • bounty amount (in sats): `number'
  • taker collateral (in sats): number
  • fee rate (sats per vbyte): number
  • oracle public key: string (eventually, but for MVP we're hardcoding to Resolvr's hosted oracle so we can skip this),
  • oracle bounty event id: string

Unknowns

How will the taker interact with the oracle and get an event id?

The exact API between the Tauri backend and the Typescript/React frontend still needs to be ironed out.